Ver en GitHub

Tablas

Documentación y ejemplos para el estilo opt-in de tablas (dado su uso prevalente en plugins de JavaScript) con Bootstrap.

On this page

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.

#	Primero	Último	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Variantes

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

Clase	Encabezado	Encabezado
Predeterminado	Celda	Celda
Primary	Celda	Celda
Secondary	Celda	Celda
Success	Celda	Celda
Danger	Celda	Celda
Warning	Celda	Celda
Info	Celda	Celda
Light	Celda	Celda
Dark	Celda	Celda

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

Transmitir significado a tecnologías de asistencia

Usar color para añadir significado solo proporciona una indicación visual, que no será transmitida a los usuarios de tecnologías asistivas – como los lectores de pantalla. Asegúrate de que la información denotada por el color sea evidente desde el contenido mismo (ej. el texto visible), o se incluya mediante medios alternativos, como texto adicional oculto con la clase .visually-hidden.

Tablas acentuadas

Filas rayadas

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

#	Primero	Último	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

Columnas rayadas

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

#	Primero	Último	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

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

#	Primero	Último	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	Primero	Último	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	Primero	Último	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	Primero	Último	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	Primero	Último	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	Primero	Último	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

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

#	Primero	Último	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

Tablas activas

Resalta una fila o celda de tabla añadiendo la clase .table-active.

#	Primero	Último	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	Primero	Último	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</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 una sombra interior en las celdas de tabla con box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); para superponerla sobre cualquier background-color especificado. Como usamos una dispersión enorme y sin desenfoque, el color será monocromo. Como --bs-table-accent-bg no está establecido por defecto, no tenemos una sombra predeterminada.
Cuando se añaden las clases .table-striped, .table-striped-columns, .table-hover o .table-active, la variable --bs-table-accent-bg se establece a un color semitransparente para colorear el fondo.
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.

#	Primero	Último	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

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

#	Primero	Último	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

Tablas sin bordes

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

#	Primero	Último	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	Primero	Último	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	Primero	Último	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	Primero	Último	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

Divisores de grupos 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).

#	Primero	Último	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

html

<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 colspan="2">Larry the Bird</td>
      <td>@twitter</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.

Encabezado 1	Encabezado 2	Encabezado 3	Encabezado 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 algo de texto de marcador de posición, destinado a ocupar bastante espacio vertical, para demostrar cómo funciona la alineación vertical en las celdas precedentes.
Esta celda hereda `vertical-align: bottom;` de la fila de tabla	Esta celda hereda `vertical-align: bottom;` de la fila de tabla	Esta celda hereda `vertical-align: bottom;` de la fila de tabla	Este es algo de texto de marcador de posición, destinado a ocupar bastante espacio vertical, para demostrar cómo funciona la alineación vertical en las celdas precedentes.
Esta celda hereda `vertical-align: middle;` de la tabla	Esta celda hereda `vertical-align: middle;` de la tabla	Esta celda está alineada arriba.	Este es algo de texto de marcador de posición, destinado a ocupar bastante espacio vertical, para demostrar cómo funciona la alineación vertical en las celdas precedentes.

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

Primero

Último

Handle

Mark

Otto

@mdo

Encabezado	Encabezado	Encabezado
A	Primero	Último
B	Primero	Último
C	Primero	Último

Larry

the Bird

@twitter

<table class="table table-striped">
  <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.

#	Primero	Último	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

#	Primero	Último	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

Pie de tabla

#	Primero	Último	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter
Pie	Pie	Pie	Pie

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

Lista de usuarios
#	Primero	Último	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

Lista de usuarios
#	Primero	Último	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

html

<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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</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}.

Recorte/truncamiento vertical

Las tablas responsivas hacen uso de overflow-y: hidden, lo cual recorta cualquier contenido que sobresalga de los bordes inferior o superior de la tabla. En particular, esto puede recortar menús desplegables y otros widgets de terceros.

Siempre responsive

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

#	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado
1	Celda	Celda	Celda	Celda	Celda	Celda	Celda	Celda	Celda
2	Celda	Celda	Celda	Celda	Celda	Celda	Celda	Celda	Celda
3	Celda	Celda	Celda	Celda	Celda	Celda	Celda	Celda	Celda

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

#	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado
1	Celda	Celda	Celda	Celda	Celda	Celda	Celda	Celda
2	Celda	Celda	Celda	Celda	Celda	Celda	Celda	Celda
3	Celda	Celda	Celda	Celda	Celda	Celda	Celda	Celda

#	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado
1	Celda	Celda	Celda	Celda	Celda	Celda	Celda	Celda
2	Celda	Celda	Celda	Celda	Celda	Celda	Celda	Celda
3	Celda	Celda	Celda	Celda	Celda	Celda	Celda	Celda

#	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado
1	Celda	Celda	Celda	Celda	Celda	Celda	Celda	Celda
2	Celda	Celda	Celda	Celda	Celda	Celda	Celda	Celda
3	Celda	Celda	Celda	Celda	Celda	Celda	Celda	Celda

#	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado
1	Celda	Celda	Celda	Celda	Celda	Celda	Celda	Celda
2	Celda	Celda	Celda	Celda	Celda	Celda	Celda	Celda
3	Celda	Celda	Celda	Celda	Celda	Celda	Celda	Celda

#	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado
1	Celda	Celda	Celda	Celda	Celda	Celda	Celda	Celda
2	Celda	Celda	Celda	Celda	Celda	Celda	Celda	Celda
3	Celda	Celda	Celda	Celda	Celda	Celda	Celda	Celda

#	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado	Encabezado
1	Celda	Celda	Celda	Celda	Celda	Celda	Celda	Celda
2	Celda	Celda	Celda	Celda	Celda	Celda	Celda	Celda
3	Celda	Celda	Celda	Celda	Celda	Celda	Celda	Celda

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

Sass

Variables

$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}body-color);
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $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:         $text-muted;

$table-bg-scale:              -80%;

Bucle

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