¿Cómo centro horizontalmente una mesa en Bootstrap?

6 minutos de lectura

avatar de usuario
Amod Gaikwad

Este es mi código. Lo que intento hacer es colocar esta mesa en el centro del contenedor. Pero en cambio, se alinea a la izquierda de forma predeterminada cuando uso la clase “contenedor”, y usa el ancho completo cuando uso la “clase de fluido de contenedor” para el div. Quiero centrar horizontalmente la mesa. ¿Alguien puede ayudar?

<!-- Container (Pricing Section) -->
<div id="pricing" class="container-fluid">
<table class="table table-bordered table-striped">
<thead><tr>
<th>Material Name</th>
<th>Rate (INR)</th>
</tr>
</thead>
<tbody style="">
<tr>
<td>Books</td>
<td>7.00(per KG)</td>

</tr>
<tr>
<td>Soft Plastic</td>
<td>15.00(per KG)</td>

</tr>
<tr>
<td>Hard Plastic</td>
<td>2.00(per KG)</td>

</tr>
</tbody>
</table>
<div>

Aquí hay una captura de pantalla.

Captura de pantalla

Sé que “contenedor-fluido” usa el ancho completo, pero también he usado solo la clase “contenedor” y no ayuda. Por favor avise.

El uso de esta combinación de fila/columna de Bootstrap funciona independientemente del tamaño de su tabla o pantalla, no se necesita CSS:

<div class="row justify-content-center">
    <div class="col-auto">
      <table class="table table-responsive">
        ....table stuff....
      </table>
    </div>
  </div>

  • Esto es para bootstrap 4.

    – ngelx

    1 de abril de 2019 a las 13:33

  • Creo que debería asegurarse de que el ancho de la tabla no exceda el ancho de la pantalla, ya que permanecerá centrado, sin barra de desplazamiento. O eso o estoy haciendo algo mal.

    – Herbert Van-Vliet

    26 de agosto de 2020 a las 8:15

  • col-md-4, col-md-6, etc. se pueden aplicar según el tamaño de la mesa.

    – JWC mayo

    6 de enero de 2021 a las 7:21

  • ¡Una solución muy inteligente, gracias!

    – ExpectoPatrom

    10 de enero a las 0:53

Para centrar horizontalmente la tabla en sí, puede usar en un CSS, tanto el margin y width propiedades.

.table {
   margin: auto;
   width: 50% !important; 
}

Ahora, para el contenido de la tabla, puede usar una combinación de CSS y las clases de tipografía Bootstrap. En este caso, CSS para el th elementos, y el .text-center clase en su mesa.

table th {
   text-align: center; 
}

<table class="table table-bordered table-striped text-center">
    <!-- Content of the table -->
</table>

Aquí lo puedes ver para ambos .container-fluid y .container clases:

table th {
   text-align: center; 
}

.table {
   margin: auto;
   width: 50% !important; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<!-- container-fluid -->
<div id="pricing" class="container-fluid">
<table class="table table-bordered table-striped text-center">
   <thead>
       <tr>
          <th>Material Name</th>
          <th>Rate (INR)</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>Books</td>
           <td>7.00(per KG)</td>
       </tr>
       <tr>
           <td>Soft Plastic</td>
           <td>15.00(per KG)</td>
       </tr>
   <tr>
       <td>Hard Plastic</td>
       <td>2.00(per KG)</td>
   </tr>
   </tbody>
</table>
  
<!-- container -->
<div id="pricing" class="container">
<table class="table table-bordered table-striped text-center">
   <thead>
       <tr>
          <th>Material Name</th>
          <th>Rate (INR)</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>Books</td>
           <td>7.00(per KG)</td>
       </tr>
       <tr>
           <td>Soft Plastic</td>
           <td>15.00(per KG)</td>
       </tr>
   <tr>
       <td>Hard Plastic</td>
       <td>2.00(per KG)</td>
   </tr>
   </tbody>
</table>

  • Es una solución para pobres ingresar al CSS y agregar algo de código. La razón por la que las hojas de estilo como bootstrap son tan completas es precisamente para evitar hackear el css.

    – JG Estiot

    14 de noviembre de 2019 a las 3:00

  • El mayor retiro con esta solución es el ancho de la mesa, ¿y si no queremos que sea solo del 50%? Kat proporcionó una gran respuesta ahora compatible con el último bootstrap 4.

    – Armín

    27 de noviembre de 2019 a las 12:35

avatar de usuario
Grigori Kislin

<div class="table-responsive">
    <table class="mx-auto w-auto">
      ....
    </table>
</div>

Tome la solución de la tabla de arranque central con 100% de ancho
Comentario de @Rene Hamburger: como en la respuesta vinculada, w-auto es necesario para que la mesa mantenga su ancho natural original. De lo contrario, se redimensiona al 100%.

Solo agrega una clase: text-center en clase de mesa.

<table class="table text-center"> 
... 
</table>

Es una clase nativa de Bootstrap que permite la alineación horizontal.

avatar de usuario
du-lacoste

Puede centrar la mesa de la siguiente manera con CSS.

.table {
    width: 50%;
    margin: 0 auto !important;
}

Necesitas tener margin: auto

  • No hay necesidad de agregar css. Hackear el css debería ser la última opción, pero desafortunadamente para algunos es el primer reflejo. La razón por la que se crearon grandes frameworks de hojas de estilo como bootstrap es precisamente para proporcionar una solución completa que no requiera codificación CSS excepto para cosas cosméticas como los colores.

    – JG Estiot

    14 de noviembre de 2019 a las 3:06

Puedes intentar que las clases de columna lo centren

<div class="row col-md-4 col-md-push-4"><!-- you can use column classes md-3,md-5 as per your table width -->
<table class="yourtableclasses">
<!-- table content -->
</table>
</div>

  • No hay necesidad de agregar css. Hackear el css debería ser la última opción, pero desafortunadamente para algunos es el primer reflejo. La razón por la que se crearon grandes frameworks de hojas de estilo como bootstrap es precisamente para proporcionar una solución completa que no requiera codificación CSS excepto para cosas cosméticas como los colores.

    – JG Estiot

    14 de noviembre de 2019 a las 3:06

con CSS

.table td {
   text-align: center;   
}

https://jsfiddle.net/8s9918my/

O arranque:

<table class="table text-center">

  • Esto no parece estar funcionando para mí. La mesa todavía está a la izquierda.

    – Giacomo

    8 de marzo de 2017 a las 14:29

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad