Tablas Bootstrap 5

Tabla básica

Una tabla básica de Bootstrap 5 tiene un poco de margen interno y una línea horizontal.

.table Añade estilos básicos a la tabla:

Ejemplo

Prueba personalmente

Filas con rayas

.table-striped Añade rayas a la tabla:

Ejemplo

Prueba personalmente

Tabla con bordes

.table-bordered Añade bordes a todos los lados de la tabla y las celdas:

Ejemplo

Prueba personalmente

Filas con efecto de desplazamiento

.table-hover Añade un efecto de desplazamiento (fondo de color gris) a las filas de la tabla:

Ejemplo

Prueba personalmente

Tabla negra/dark

.table-dark Añade un fondo negro a la tabla:

Ejemplo

Prueba personalmente

Tabla con rayas oscuras

combinar .table-dark Y .table-striped Para crear una tabla con rayas oscuras:

Ejemplo

Prueba personalmente

Tabla oscura con efecto de desplazamiento

.table-hover Añade un efecto de desplazamiento (fondo de color gris) a las filas de la tabla:

Ejemplo

Prueba personalmente

Tabla sin bordes

.table-borderless Elimina los bordes del tablero desde la tabla:

Ejemplo

Prueba personalmente

clases de contexto

Las clases de contexto se pueden usar para toda la tabla (<table>) y filas de tabla (<tr>) o celda de tabla (<td>) Tintado.

Ejemplo

Prueba personalmente

Clases de contexto disponibles:

Clase Descripción
.table-primary Azul: representa acciones importantes.
.table-success Verde: representa éxito o acción positiva.
.table-danger Rojo: representa peligro o comportamiento negativo potencial.
.table-info Azul claro: representa cambios neutros en información o operaciones.
.table-warning Naranja: representa una advertencia que puede requerir atención.
.table-active Gris: aplica el color de hover a las filas o celdas de la tabla.
.table-secondary Gris: representa acciones no tan importantes.
.table-light Fondo de tabla o fila de tabla en gris claro.
.table-dark Fondo de tabla o fila de tabla en gris oscuro.

Color del encabezado de la tabla

También puede usar cualquier clase de contexto para agregar color de fondo solo al título de la tabla:

Ejemplo

Prueba personalmente

Tabla pequeña

.table-sm La clase hace que la tabla sea más pequeña reduciendo el relleno de las celdas:

Ejemplo

Prueba personalmente

Tabla responsive

.table-responsive La clase agrega una barra de desplazamiento a la tabla cuando es necesario (cuando es demasiado grande en la dirección horizontal):

Ejemplo

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

Prueba personalmente

También puede 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
.table-responsive-xxl < 1400px

Ejemplo

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

Prueba personalmente