Tablas

Descripción general

Debido al uso generalizado de elementos <table> en widgets de terceros como calendarios y selectores de fecha, las tablas de Bootstrap son opt-in. Añade la clase base .table a cualquier <table>, luego extiéndela con nuestras clases modificadoras opcionales o estilos personalizados. Ningún estilo de tabla se hereda en Bootstrap, lo que significa que cualquier tabla anidada puede estilarse de forma independiente del padre.

Usando 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">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>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

Variantes

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

<!-- On tables -->
<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>

<!-- On rows -->
<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-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 rayadas

Usa .table-striped para añadir rayado de cebra a cualquier fila de tabla dentro del <tbody>.

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

Columnas rayadas

Usa .table-striped-columns para añadir rayado de cebra a cualquier columna de la tabla.

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

Estas clases también se pueden añadir 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 hover

Añade .table-hover para habilitar un estado hover en las filas de tabla dentro de un <tbody>.

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

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

Estas filas con hover también se pueden combinar con la variante de filas rayadas:

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

Tablas activas

Resalta una fila o celda de tabla añadiendo la 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 rayadas, columnas rayadas, filas con hover y tablas activas), usamos algunas técnicas para hacer que estos efectos funcionen para todas nuestras variantes de tabla:

• Empezamos estableciendo el fondo de una celda de tabla con la propiedad personalizada --bs-table-bg. Todas las variantes de tabla luego 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 añadimos un box shadow inset 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 superponerlo sobre cualquier background-color especificado. Usa una cascada personalizada para sobrescribir el box-shadow, independientemente de la especificidad CSS. Como usamos un spread enorme y sin blur, el color será monótono. Dado que --bs-table-accent-bg está establecido en transparent por defecto, no tenemos un box shadow predeterminado.
• Cuando se añaden las clases .table-striped, .table-striped-columns, .table-hover o .table-active, ya sea --bs-table-bg-type o --bs-table-bg-state (por defecto establecido en initial) se establecen en un color semitransparente (--bs-table-striped-bg, --bs-table-active-bg o --bs-table-hover-bg) para colorear el fondo y sobrescribir 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 de texto y 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

Añade .table-bordered para bordes en todos los lados de la tabla y las celdas.

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

Se pueden añadir utilidades de color de borde para cambiar los colores:

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

Tablas sin bordes

Añade .table-borderless para una tabla sin bordes.

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

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

Tablas pequeñas

Añade .table-sm para hacer cualquier .table más compacta reduciendo a la mitad el padding de todas las celdas.

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

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

Divisores de grupo de tabla

Añade un borde más grueso y oscuro entre los grupos de la tabla—<thead>, <tbody> y <tfoot>—con .table-group-divider. Personaliza el color cambiando el border-top-color (para el cual actualmente no proporcionamos una clase de utilidad en este momento).

<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 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 tabla del <thead> siempre están alineadas verticalmente hacia abajo. Las celdas de tabla del <tbody> heredan su alineación del <table> y están alineadas hacia arriba por defecto. Usa las clases de alineación vertical para realinear 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">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Anidamiento

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

Para evitar que cualquier estilo se filtre a las tablas anidadas, usamos el selector combinador hijo (>) en nuestro CSS. Como necesitamos seleccionar todos los td y th en el thead, tbody, y tfoot, nuestro selector sería bastante largo sin él. Por ello, usamos el selector .table > :not(caption) > * > *, que parece algo extraño, para seleccionar todos los td y th del .table, pero ninguno de las posibles tablas anidadas.

Ten en cuenta que si añades <tr> como hijos directos de una tabla, esos <tr> se envolverán en un <tbody> por defecto, haciendo así que nuestros selectores funcionen como se espera.

Anatomía

Encabezado de tabla

De forma similar a las tablas y las tablas oscuras, usa las clases modificadoras .table-light o .table-dark para que los <thead> aparezcan en 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 tabla

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

Subtítulos

Un <caption> funciona como un encabezado para una tabla. Ayuda a los usuarios con lectores de pantalla a encontrar una tabla y entender de qué trata y decidir si quieren leerla.

<table class="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 tabla con .caption-top.

<table class="table caption-top">
  <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>John</td>
      <td>Doe</td>
      <td>@social</td>
    </tr>
  </tbody>
</table>

Tablas responsive

Las tablas responsivas permiten desplazar las tablas horizontalmente con facilidad. Haz cualquier tabla responsiva en todos los viewports envolviendo un .table con .table-responsive. O elige un breakpoint máximo hasta el cual tener una tabla responsiva usando .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Siempre responsive

En todos los breakpoints, usa .table-responsive para tablas con desplazamiento horizontal.

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

Específico por breakpoint

Usa .table-responsive{-sm|-md|-lg|-xl|-xxl} según sea necesario para crear tablas responsivas hasta un breakpoint particular. A partir de ese breakpoint hacia arriba, 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 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 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 & $table-hover-bg-factor) se usan para determinar el contraste en las variantes de tabla.
• Aparte de las variantes de tabla clara y oscura, los colores del tema se aclaran con la variable $table-bg-scale.