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>

Mesa sin bordes

Añade .table-borderlesspara una mesa sin bordes.

# Primero Ultimo Resolver
1 Marca Otón @mdo
2 jacob Thornton @grasa
3 larry el pájaro @gorjeo 
<table class="table table-borderless">
  <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>

.table-borderlesstambién se puede utilizar en mesas oscuras.

# Primero Ultimo Resolver
1 Marca Otón @mdo
2 jacob Thornton @grasa
3 larry el pájaro @gorjeo 
<table class="table table-borderless 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 en sí (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.

Estas tablas pueden aparecer rotas hasta que sus estilos de respuesta se apliquen a anchos de ventana específicos.

# 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
2 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 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# 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
2 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 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# 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
2 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 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# 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
2 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 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>