Tables

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

# Primero Último Manejar
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Opciones de cabecera de Tabla

De forma similar a las tablas y tablas oscuras, use las clases modificadoras . thead-light o . thead-dark para hacer que los & lt; thead & gt; aparezcan en gris claro u oscuro.

# Primero Último Manejar
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# Primero Último Manejar
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Tabla sin bordes

Agregue . table-borderless para una tabla sin bordes.

# Primero Último Manejar
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

. table-borderless también se puede usar en tablas oscuras.

# Primero Último Manejar
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Tabla pequeña

Add .table-sm to make tables more compact by cutting cell padding in half.

# Primero Último Manejar
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# Primero Último Manejar
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Captions

Un & lt; caption & gt; funciona como el encabezado de una tabla. Ayuda a los usuarios con lectores de pantalla a encontrar una tabla, comprender de qué se trata y decidir si quieren leerla.

Lista de Usuarios
# Primero Último Manejar
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Tabla Oscura

También puede invertir los colores, con texto claro sobre fondos oscuros, con . table-dark .

# Primero Último Manejar
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Filas de rayas

Utilice . table-striped para agregar cebra-strings a cualquier fila de la tabla dentro del & lt; tbody & gt; .

# Primero Último Manejar
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# Primero Último Manejar
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Filas flotantes

Agrega . table-hover para habilitar un estado de desplazamiento en las filas de la tabla dentro de un & lt; tbody & gt; .

# Primero Último Manejar
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# Primero Último Manejar
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Clases contextuales

Utilice clases contextuales para colorear filas de tablas o celdas individuales.

Clase Encabezado Encabezado
Activo Celda Celda
Por Defecto Celda Celda
Primary Celda Celda
Secondary Celda Celda
Success Celda Celda
Danger Celda Celda
Warning Celda Celda
Info Celda Celda

Las variantes de fondo de tabla normales no están disponibles con la tabla oscura; sin embargo, puede usar utilidades de texto o de fondo para lograr estilos similares.

# Encabezado Encabezado
1 Celda Celda
2 Celda Celda
3 Celda Celda
4 Celda Celda
5 Celda Celda
6 Celda Celda
7 Celda Celda
8 Celda Celda
9 Celda Celda

Tablas receptivas

Las tablas receptivas permiten que las tablas se desplacen horizontalmente con facilidad. Haga que cualquier tabla responda en todas las ventanas gráficas envolviendo una . Table con . Table-responsive . O elija un punto de interrupción máximo con el que tener una tabla receptiva utilizando . Table-responsive {-sm | -md | -lg | -xl} . < / p>

# Encabezado Encabezado Encabezado Encabezado Encabezado Encabezado Encabezado Encabezado Encabezado
1 Celda Celda Celda Celda Celda Celda Celda Celda Celda
2 Celda Celda Celda Celda Celda Celda Celda Celda Celda
3 Celda Celda Celda Celda Celda Celda Celda Celda Celda