Documentación y ejemplos para el estilo opcional de tablas (dado su uso frecuente en los complementos de JavaScript) con Bootstrap.
En esta página
Visión general
Debido al uso generalizado de <table>elementos en widgets de terceros, como calendarios y selectores de fechas, las tablas de Bootstrap son opcionales . Agregue la clase base .tablea cualquier <table>, luego amplíe con nuestras clases de modificadores opcionales o estilos personalizados. Todos los estilos de tabla no se heredan en Bootstrap, lo que significa que cualquier tabla anidada se puede diseñar independientemente del padre.
Usando el marcado de tabla más básico, así es como .tablese ven las tablas basadas en Bootstrap.
#
Primero
Ultimo
Resolver
1
Marca
Otón
@mdo
2
jacob
Thornton
@grasa
3
larry el pájaro
@gorjeo
<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
variantes
Use clases contextuales para colorear tablas, filas de tablas o celdas individuales.
Clase
Bóveda
Bóveda
Defecto
Célula
Célula
Primario
Célula
Célula
Secundario
Célula
Célula
Éxito
Célula
Célula
Peligro
Célula
Célula
Advertencia
Célula
Célula
Información
Célula
Célula
Luz
Célula
Célula
Oscuro
Célula
Célula
<!-- On tables --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</td></tr>
Transmitir significado a las tecnologías de asistencia
El uso del color para agregar significado solo proporciona una indicación visual, que no se transmitirá a los usuarios de tecnologías de asistencia, como los lectores de pantalla. Asegúrese de que la información indicada por el color sea obvia a partir del contenido mismo (por ejemplo, el texto visible) o se incluya a través de medios alternativos, como texto adicional oculto con la .visually-hiddenclase.
Tablas acentuadas
filas de rayas
Úselo .table-stripedpara agregar rayas de cebra a cualquier fila de la tabla dentro del archivo <tbody>.
#
Primero
Ultimo
Resolver
1
Marca
Otón
@mdo
2
jacob
Thornton
@grasa
3
larry el pájaro
@gorjeo
<tableclass="table table-striped">
...
</table>
Estas clases también se pueden agregar a las variantes de la tabla:
Comenzamos configurando el fondo de una celda de tabla con la --bs-table-bgpropiedad personalizada. Todas las variantes de la tabla establecen esa propiedad personalizada para colorear las celdas de la tabla. De esta forma, no nos meteremos en problemas si se utilizan colores semitransparentes como fondos de mesa.
Luego, agregamos una sombra de cuadro insertada en las celdas de la tabla con box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);una capa encima de cualquier archivo background-color. Debido a que usamos una gran extensión y sin desenfoque, el color será monótono. Dado --bs-table-accent-bgque no está configurado de forma predeterminada, no tenemos una sombra de cuadro predeterminada.
Cuando se agregan clases o .table-striped, se establece en un color semitransparente para colorear el fondo..table-hover.table-active--bs-table-accent-bg
Para cada variante de mesa, generamos un --bs-table-accent-bgcolor con el mayor contraste dependiendo de ese color. Por ejemplo, el color de acento para .table-primaryes más oscuro mientras que .table-darktiene un color de acento más claro.
Los colores del texto y del borde se generan de la misma manera y sus colores se heredan de forma predeterminada.
Las celdas de la tabla <thead>siempre están alineadas verticalmente hacia abajo. Las celdas de la tabla <tbody>heredan su alineación <table>y están alineadas en la parte superior de forma predeterminada. Use las clases de alineación vertical para volver a alinear donde sea necesario.
Título 1
Título 2
Título 3
Título 4
Esta celda hereda vertical-align: middle;de la tabla.
Esta celda hereda vertical-align: middle;de la tabla.
Esta celda hereda vertical-align: middle;de la tabla.
Este es un texto de marcador de posición, destinado a ocupar bastante espacio vertical, para demostrar cómo funciona la alineación vertical en las celdas anteriores.
Esta celda hereda vertical-align: bottom;de la fila de la tabla
Esta celda hereda vertical-align: bottom;de la fila de la tabla
Esta celda hereda vertical-align: bottom;de la fila de la tabla
Este es un texto de marcador de posición, destinado a ocupar bastante espacio vertical, para demostrar cómo funciona la alineación vertical en las celdas anteriores.
Esta celda hereda vertical-align: middle;de la tabla.
Esta celda hereda vertical-align: middle;de la tabla.
Esta celda está alineada en la parte superior.
Este es un texto de marcador de posición, destinado a ocupar bastante espacio vertical, para demostrar cómo funciona la alineación vertical en las celdas anteriores.
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr>
...
</tr></thead><tbody><tr>
...
</tr><trclass="align-bottom">
...
</tr><tr><td>...</td><td>...</td><tdclass="align-top">This cell is aligned to the top.</td><td>...</td></tr></tbody></table></div>
Anidamiento
Las tablas anidadas no heredan los estilos de borde, los estilos activos y las variantes de tabla.
Para evitar que los estilos se filtren a las tablas anidadas, usamos el >selector combinador secundario ( ) en nuestro CSS. Dado que necesitamos apuntar a todos los tds y ths en thead, tbodyy tfoot, nuestro selector se vería bastante largo sin él. Como tal, usamos el .table > :not(caption) > * > *selector de aspecto bastante extraño para apuntar a todas las tds y ths del .table, pero ninguna de las posibles tablas anidadas.
Tenga en cuenta que si agrega <tr>s como hijos directos de una tabla, estos <tr>se incluirán en un <tbody>de forma predeterminada, lo que hará que nuestros selectores funcionen según lo previsto.
Anatomía
cabeza de mesa
Al igual que las tablas y las tablas oscuras, use las clases de modificadores .table-lighto .table-darkpara hacer que las <thead>s aparezcan en gris claro u oscuro.
A <caption>funciona como un encabezado para una tabla. Ayuda a los usuarios con lectores de pantalla a encontrar una tabla y entender de qué se trata y decidir si quieren leerla.
Lista de usuarios
#
Primero
Ultimo
Resolver
1
Marca
Otón
@mdo
2
jacob
Thornton
@grasa
3
larry el pájaro
@gorjeo
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
También puedes poner el <caption>en la parte superior de la mesa con .caption-top.
Lista de usuarios
#
Primero
Ultimo
Resolver
1
Marca
Otón
@mdo
2
jacob
Thornton
@grasa
3
larry
el pájaro
@gorjeo
<tableclass="table caption-top"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table>
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 un .tablecon .table-responsive. O elija un punto de interrupción máximo con el que tener una tabla receptiva usando .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Recorte/truncamiento vertical
Las tablas receptivas utilizan overflow-y: hidden, que recorta cualquier contenido que vaya más allá de los bordes inferior o superior de la tabla. En particular, esto puede recortar menús desplegables y otros widgets de terceros.
Siempre receptivo
En cada punto de interrupción, utilícelo .table-responsivepara tablas de desplazamiento horizontal.
Úselo .table-responsive{-sm|-md|-lg|-xl|-xxl}según sea necesario para crear tablas receptivas hasta un punto de interrupción particular. A partir de ese punto de interrupción, la tabla se comportará normalmente y no se desplazará horizontalmente.
Estas tablas pueden aparecer rotas hasta que sus estilos de respuesta se apliquen a anchos de ventana específicos.
Las variables de factor ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) se utilizan para determinar el contraste en las variantes de tabla.
Además de las variantes de mesa clara y oscura, los colores del tema se aclaran con la $table-bg-levelvariable.