Source

Mesas

Documentación y ejemplos para el estilo opcional de tablas (dado su uso frecuente en los complementos de JavaScript) con Bootstrap.

Ejemplos

Debido al uso generalizado de tablas en widgets de terceros, como calendarios y selectores de fechas, hemos diseñado nuestras tablas para que sean opcionales . Simplemente agregue la clase base .tablea cualquiera <table>, luego amplíe con estilos personalizados o nuestras diversas clases de modificadores incluidas.

Usando el marcado de tabla más básico, así es como .tablese ven las tablas basadas en Bootstrap. Todos los estilos de tabla se heredan en Bootstrap 4 , lo que significa que cualquier tabla anidada tendrá el mismo estilo que la principal.

#	Primero	Ultimo	Resolver
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry	el pájaro	@gorjeo

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

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

#	Primero	Ultimo	Resolver
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry	el pájaro	@gorjeo

<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Opciones de cabecera de mesa

Al igual que las tablas y las tablas oscuras, use las clases de modificadores .thead-lighto .thead-darkpara hacer que las <thead>s aparezcan en gris claro u oscuro.

#	Primero	Ultimo	Resolver
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry	el pájaro	@gorjeo

#	Primero	Ultimo	Resolver
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry	el pájaro	@gorjeo

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

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

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	Primero	Ultimo	Resolver
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry	el pájaro	@gorjeo

<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

tabla bordeada

Agregue .table-borderedbordes en todos los lados de la tabla y las celdas.

#	Primero	Ultimo	Resolver
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry el pájaro		@gorjeo

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	Primero	Ultimo	Resolver
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry el pájaro		@gorjeo

<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Filas flotantes

Agregue .table-hoverpara habilitar un estado de desplazamiento en las filas de la tabla dentro de un archivo <tbody>.

#	Primero	Ultimo	Resolver
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry el pájaro		@gorjeo

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	Primero	Ultimo	Resolver
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry el pájaro		@gorjeo

<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Mesa pequeña

Agregue .table-smpara hacer que las mesas sean más compactas cortando el relleno de celdas por la mitad.

#	Primero	Ultimo	Resolver
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry el pájaro		@gorjeo

<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	Primero	Ultimo	Resolver
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry el pájaro		@gorjeo

<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Clases contextuales

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

Clase	Bóveda	Bóveda
Activo	Célula	Célula
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 rows -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>

  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

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

#	Bóveda	Bóveda
1	Célula	Célula
2	Célula	Célula
3	Célula	Célula
4	Célula	Célula
5	Célula	Célula
6	Célula	Célula
7	Célula	Célula
8	Célula	Célula
9	Célula	Célula

<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</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 .sr-onlyclase.

Cree tablas receptivas envolviendo cualquiera .tablecon .table-responsive{-sm|-md|-lg|-xl}, haciendo que la tabla se desplace horizontalmente en cada max-widthpunto de interrupción de hasta (pero sin incluir) 576 px, 768 px, 992 px y 1120 px, respectivamente.

Tenga en cuenta que, dado que los navegadores actualmente no admiten consultas de contexto de rango , solucionamos las limitaciones de prefijos min-ymax- ventanas gráficas con anchos fraccionarios (lo que puede ocurrir bajo ciertas condiciones en dispositivos de alto dpi, por ejemplo) mediante el uso de valores con mayor precisión para estas comparaciones. .

subtítulos

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

<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="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}.

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.

#	Bóveda	Bóveda	Bóveda	Bóveda	Bóveda	Bóveda	Bóveda	Bóveda	Bóveda
1	Célula	Célula	Célula	Célula	Célula	Célula	Célula	Célula	Célula
2	Célula	Célula	Célula	Célula	Célula	Célula	Célula	Célula	Célula
3	Célula	Célula	Célula	Célula	Célula	Célula	Célula	Célula	Célula

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

Punto de interrupción específico

Úselo .table-responsive{-sm|-md|-lg|-xl}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.

#	Bóveda	Bóveda	Bóveda	Bóveda	Bóveda
1	Célula	Célula	Célula	Célula	Célula
2	Célula	Célula	Célula	Célula	Célula
3	Célula	Célula	Célula	Célula	Célula

#	Bóveda	Bóveda	Bóveda	Bóveda	Bóveda
1	Célula	Célula	Célula	Célula	Célula
2	Célula	Célula	Célula	Célula	Célula
3	Célula	Célula	Célula	Célula	Célula

#	Bóveda	Bóveda	Bóveda	Bóveda	Bóveda
1	Célula	Célula	Célula	Célula	Célula
2	Célula	Célula	Célula	Célula	Célula
3	Célula	Célula	Célula	Célula	Célula

#	Bóveda	Bóveda	Bóveda	Bóveda	Bóveda
1	Célula	Célula	Célula	Célula	Célula
2	Célula	Célula	Célula	Célula	Célula
3	Célula	Célula	Célula	Célula	Célula

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

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

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

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