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.

Ejm

Table

Striped rows (filas de rayas)

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

Ejm

Stripered table

Bordered Table

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

Ejm

Bordered table

Hover rows

La clase .table-hover añade un efecto Rover a las filas de la tabla

Ejm

Hover rows

Tabla oscura

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

Ejm

Table dark

Hoverable Dark Table

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

Ejm

Hoverable Dark Table

Tabla sin bordes

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

Ejm

Tabla sin bordes

 

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>).

Ejm

Clases contextuales

Las clases contextuales que se pueden usar son:

Class Description
.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.

Ejm

Colores para los encabezados 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.

Ejm

Tabla pequeña

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>