Tablas en Bootstrap

Estilos de tabla

Estos son los estilos de tabla que podemos encontrar

• .table
• .table-striped
• .table-bordered
• .table-hover
• .table-dark
• .table-hover
• .table-borderless
• Clases contextuales
  • .table-primary
  • .table-success
  • .table-danger
  • .table-info
  • .table-warning
  • .table-active
  • .table-secondary
  • .table-light
  • .table-dark
• Encabezados de la tabla
  • thead-dark
  • head-light
• .table-sm
• Tablas Responsive
  • .table-responsive-sm
  • .table-responsive-md
  • .table-responsive-lg
  • .table-responsive-xl

Tabla básica Bootstrap

Una tabla básica Bootstrap tiene ligeros divisores padding y horizontales

La clase .table añade un estilo básico a una tabla.

Striped rows (filas de rayas)

La clase .table-striped añade un efecto cebra a una tabla.

Bordered Table

La clase .table-bordered añade bordes a todas las celdas de una tabla.

Dark Table

La clase .table-dark añade un fondo negro a la tabla.

Hoverable Dark Table

La clase .table-hover añade un efecto hover (color de fondo gris) en las filas de la tabla.

Tabla sin bordes

La clase .table-borderless quita los bordes de la tabla.

Clase contextuales

Las clases contextuales pueden ser usadas para dar color a toda la tabla (<table>), a filas de la tabla (<tr>) o a celdas de la tabla a(<td>).

Las clases contextuales que se pueden usar son:

Clase	Descripción
.table-primary	Blue: indica una importante acción
.table-success	Green: indica una satisfactoria o positiva acción
.table-danger	Red: indica una peligrosa o negativa acción
.table-info	Light blue: indica una acción informativa neutral o de cambio
.table-warning	Orange: indica una acción de aviso que puede necesitar atención
.table-active	Grey: aplica el color hover a la fila o celda de la tabla
.table-secondary	Grey: indica una acción ligeramente menos importante
.table-light	tabla gris claro o fondo de fila de tabla
.table-dark	Tabla gris oscuro o fondo de fila de tabla

Colores para los encabezados de la tabla

La clase .thead-dark añade un fondo negro a los encabezados de la tabla, y la clase .thead-light añade un fondo gris al encabezado de la tabla.

Tabla pequeña

La clase .table-sm hace que la tabla sea más pequeña cortando el relleno de la celda por la mitad.

Tablas responsive

La clase .table-responsive crea una tabla responsive, se agrega una barra de desplazamiento horizontal a la tabla en las pantallas que tienen menos de 992 px de ancho (si es necesario). Cuando se visualiza en algo más grande que 992 px de ancho, no hay diferencia.

Ejm

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

También puedes decidir cuándo la tabla debe obtener una barra de desplazamiento, dependiendo del ancho de la pantalla.

Clase	Ancho de pantalla
.table-responsive-sm	< 576px
.table-responsive-md	< 768px
.table-responsive-lg	< 992px
.table-responsive-xl	< 1200px

Ejm

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>