Tablas

Resumen

Debido al uso generalizado de los elementos <table> en widgets de terceros como calendarios y selectores de fechas, las tablas de Bootstrap son opcionales (opt-in). Agrega la clase base .table a cualquier <table>, luego extiéndela con nuestras clases modificadoras opcionales o estilos personalizados. Todos los estilos de tabla no se heredan en Bootstrap, lo que significa que las tablas anidadas se pueden diseñar de forma independiente de la tabla madre.

Utilizando el marcado de tabla más básico, así es como se ven las tablas basadas en .table en Bootstrap.

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nombre (First)</th>
      <th scope="col">Apellido (Last)</th>
      <th scope="col">Usuario (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>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

Variantes

Usa clases contextuales para colorear tablas, filas de tabla o celdas individuales.

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

<!-- En filas -->
<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>

<!-- En celdas (`td` o `th`) -->
<tr>
  <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>

Tablas acentuadas

Filas a rayas

Usa .table-striped para agregar rayas de cebra a cualquier fila de tabla dentro del <tbody>.

<table class="table table-striped">
  ...
</table>

Columnas a rayas

Usa .table-striped-columns para agregar rayas de cebra a cualquier columna de tabla.

<table class="table table-striped-columns">
  ...
</table>

Estas clases también se pueden agregar a las variantes de tabla:

<table class="table table-dark table-striped">
  ...
</table>

<table class="table table-dark table-striped-columns">
  ...
</table>

<table class="table table-success table-striped">
  ...
</table>

<table class="table table-success table-striped-columns">
  ...
</table>

Filas con efecto hover

Agrega .table-hover para habilitar un estado hover en las filas de la tabla dentro de un <tbody>.

<table class="table table-hover">
  ...
</table>

<table class="table table-dark table-hover">
  ...
</table>

Estas filas con efecto hover también se pueden combinar con la variante de filas a rayas:

<table class="table table-striped table-hover">
  ...
</table>

Tablas activas

Destaca una fila o celda de tabla agregando una clase .table-active.

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>John</td>
      <td>Doe</td>
      <td class="table-active">@social</td>
    </tr>
  </tbody>
</table>

<table class="table table-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>John</td>
      <td>Doe</td>
      <td class="table-active">@social</td>
    </tr>
  </tbody>
</table>

¿Cómo funcionan las variantes y las tablas acentuadas?

Para las tablas acentuadas (filas a rayas, columnas a rayas, filas con efecto hover y tablas activas), utilizamos algunas técnicas para que estos efectos funcionen para todas nuestras variantes de tabla:

• Comenzamos estableciendo el fondo de una celda de tabla con la propiedad personalizada --bs-table-bg. Luego, todas las variantes de tabla establecen esa propiedad personalizada para colorear las celdas de la tabla. De esta manera, no tenemos problemas si se usan colores semitransparentes como fondos de tabla.
• Luego agregamos una sombra de caja interna (inset box shadow) en las celdas de la tabla con box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))); para colocar capas encima de cualquier background-color especificado. Utiliza una cascada personalizada para anular el box-shadow, independientemente de la especificidad CSS. Debido a que usamos una gran propagación y sin desenfoque, el color será monótono. Dado que --bs-table-accent-bg está establecido en transparent de forma predeterminada, no tenemos una sombra de caja predeterminada.
• Cuando se agregan las clases .table-striped, .table-striped-columns, .table-hover o .table-active, se establece --bs-table-bg-type o --bs-table-bg-state (por defecto establecido en initial) a un color semitransparente (--bs-table-striped-bg, --bs-table-active-bg o --bs-table-hover-bg) para colorear el fondo y anular el --bs-table-accent-bg predeterminado.
• Para cada variante de tabla, generamos un color --bs-table-accent-bg con el mayor contraste dependiendo de ese color. Por ejemplo, el color de acento para .table-primary es más oscuro, mientras que .table-dark tiene 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 por defecto.

Detrás de escena se ve así:

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));
    $table-border-color: mix($color, $background, percentage($table-border-factor));

    --#{$prefix}table-color: #{$color};
    --#{$prefix}table-bg: #{$background};
    --#{$prefix}table-border-color: #{$table-border-color};
    --#{$prefix}table-striped-bg: #{$striped-bg};
    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$prefix}table-active-bg: #{$active-bg};
    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$prefix}table-hover-bg: #{$hover-bg};
    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: var(--#{$prefix}table-color);
    border-color: var(--#{$prefix}table-border-color);
  }
}

Bordes de tabla

Tablas con borde

Agrega .table-bordered para obtener bordes en todos los lados de la tabla y las celdas.

<table class="table table-bordered">
  ...
</table>

Se pueden agregar utilidades de color de borde para cambiar los colores:

<table class="table table-bordered border-primary">
  ...
</table>

Tablas sin bordes

Agrega .table-borderless para una tabla sin bordes.

<table class="table table-borderless">
  ...
</table>

<table class="table table-dark table-borderless">
  ...
</table>

Tablas pequeñas

Agrega .table-sm para hacer que cualquier .table sea más compacta reduciendo a la mitad todo el relleno (padding) de las celdas.

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

<table class="table table-dark table-sm">
  ...
</table>

Divisores de grupos de tablas

Agrega un borde más grueso y oscuro entre los grupos de tablas (<thead>, <tbody> y <tfoot>) con .table-group-divider. Personaliza el color cambiando border-top-color (para el cual no proporcionamos actualmente una clase de utilidad).

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nombre</th>
      <th scope="col">Apellido</th>
      <th scope="col">Usuario</th>
    </tr>
  </thead>
  <tbody class="table-group-divider">
    <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>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

Alineación vertical

Las celdas de la tabla de <thead> siempre están alineadas verticalmente en la parte inferior. Las celdas de la tabla en <tbody> heredan su alineación de <table> y están alineadas en la parte superior por defecto. Usa las clases de alineación vertical para volver a alinearlas donde sea necesario.

<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">Esta celda está alineada en la parte superior.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Anidación

Los estilos de borde, los estilos activos y las variantes de tabla no son heredados por las tablas anidadas.

<table class="table table-striped table-bordered">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Cómo funciona la anidación

Para evitar que cualquier estilo se filtre a las tablas anidadas, utilizamos el selector combinador secundario (>) en nuestro CSS. Dado que necesitamos apuntar a todas las td y th en el thead, tbody y tfoot, nuestro selector se vería bastante largo sin él. Como tal, utilizamos el selector de apariencia bastante extraña .table > :not(caption) > * > * para apuntar a todas las td y th de la .table, pero a ninguna de las posibles tablas anidadas.

Ten en cuenta que si agregas <tr> como hijos directos de una tabla, esos <tr> se envolverán en un <tbody> por defecto, lo que hace que nuestros selectores funcionen según lo previsto.

Anatomía

Cabecera de la tabla

De manera similar a las tablas y tablas oscuras, usa las clases modificadoras .table-light o .table-dark para hacer que las <thead> aparezcan de color gris claro u oscuro.

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Pie de la tabla

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Leyendas

Una <caption> funciona como un encabezado para una tabla. Ayuda a los usuarios con lectores de pantalla a encontrar una tabla, comprender de qué se trata y decidir si desean leerla.

<table class="table table-sm">
  <caption>Lista de usuarios</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

También puedes colocar la <caption> en la parte superior de la tabla con .caption-top.

<table class="table caption-top">
  <caption>Lista de usuarios</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nombre</th>
      <th scope="col">Apellido</th>
      <th scope="col">Usuario</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>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

Tablas responsivas

Las tablas responsivas permiten desplazarse horizontalmente por las tablas con facilidad. Haz que cualquier tabla sea responsiva en todos los viewports envolviendo una .table con .table-responsive. O bien, elige un punto de interrupción (breakpoint) máximo con el que tener una tabla responsiva utilizando .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Siempre responsivo

En cada punto de interrupción, utiliza .table-responsive para tablas con desplazamiento horizontal.

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

Puntos de interrupción específicos

Usa .table-responsive{-sm|-md|-lg|-xl|-xxl} según sea necesario para crear tablas responsivas hasta un punto de interrupción en particular. A partir de ese punto de interrupción y superior, la tabla se comportará normalmente y no se desplazará horizontalmente.

Estas tablas pueden parecer rotas hasta que sus estilos responsivos se apliquen en anchos de viewport específicos.

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

<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>

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

CSS

Variables de Sass

$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 var(--#{$prefix}emphasis-color);
$table-bg:                    var(--#{$prefix}body-bg);
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor);

$table-border-factor:         .2;
$table-border-width:          var(--#{$prefix}border-width);
$table-border-color:          var(--#{$prefix}border-color);

$table-striped-order:         odd;
$table-striped-columns-order: even;

$table-group-separator-color: currentcolor;

$table-caption-color:         var(--#{$prefix}secondary-color);

$table-bg-scale:              -80%;

Bucles de Sass

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

Personalización

• Las variables de factor ($table-striped-bg-factor, $table-active-bg-factor y $table-hover-bg-factor) se utilizan para determinar el contraste en las variantes de tabla.
• Además de las variantes de tabla clara y oscura, los colores del tema se aclaran mediante la variable $table-bg-scale.