Skip to main content Skip to docs navigation
En GitHub

Tablas

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

En esta página

Descripción general

Debido al uso generalizado de elementos <table> en widgets de terceros como calendarios y selectores de fechas, las tablas de Bootstrap son opt-in. Agrega la clase base .table a cualquier <table>, luego amplía con nuestras clases de modificadores opcionales o estilos personalizados. No todos los estilos de tabla se heredan en Bootstrap, lo que significa que cualquier tabla anidada se puede diseñar independientemente 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">Primero</th>
      <th scope="col">Último</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 tablas o celdas individuales.

Clase Encabezado Encabezado
Por defecto 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 
<!-- 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` 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 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úrate de que la información denotada 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 clase .visually-hidden.

Tablas acentuadas

Filas de rayas

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

# Primero Último Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-striped">
  ...
</table>

Estas clases también se pueden agregar a las variantes de la 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-success table-striped">
  ...
</table>

Filas con estado hover

Agrega .table-hover para habilitar un estado hover en las filas de la tabla dentro de <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 hover también se pueden combinar con la variante a rayas (.table-striped):

# Primero Último Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-striped table-hover">
  ...
</table>

Filas y celdas active

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

# Nombre Apellido 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>
# Nombre Apellido 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, filas hover y tablas activas), usamos algunas técnicas para hacer que estos efectos funcionen para todas nuestras variantes de tabla:

  • Comenzamos configurando el fondo de una celda de tabla con la propiedad personalizada --bs-table-bg. Todas las variantes de la tabla establecen esa propiedad personalizada para colorear las celdas de la tabla. De esta forma, no nos meteremos en problemas si se utilizan colores semitransparentes como fondos de tablas.
  • Luego agregamos una sombra en las celdas de la tabla con box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); para superponer cualquier background-color especificado. Debido a que usamos una gran extensión y sin desenfoque, el color será monótono. Dado que --bs-table-accent-bg no está configurado de forma predeterminada, no tenemos una sombra predeterminada.
  • Cuando se agregan las clases .table-striped, .table-hover o .table-active, --bs-table-accent-bg se establece en un color semitransparente para colorear el fondo.
  • Para cada variante de tabla, generamos un color --bs-table-accent-bg con el mayor contraste según ese color. Por ejemplo, el accent color para .table-primary es más oscuro mientras que .table-dark tiene un accent color más claro.
  • Los colores del texto y del borde se generan de la misma manera y sus colores se heredan de forma predeterminada.

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));
    $border-color: mix($color, $background, percentage($table-border-factor));

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

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

Bordes de la tabla

Tablas bordeadas

Agrega .table-bordered para mostrar 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 agregar 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

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

Agrega .table-sm para hacer que cualquier .table sea más compacta cortando todo el padding de las celdas por la mitad.

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

Alineamiento vertical

Las celdas de la tabla de <thead> siempre están alineadas verticalmente hacia abajo. 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 vertical align para volver a alinear 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 un texto de marcador de posición, destinado a ocupar bastante espacio vertical, para demostrar cómo funciona la alineación vertical en las celdas anteriores.
Esta celda hereda vertical-align: bottom; de la fila de la tabla Esta celda hereda vertical-align: bottom; de la fila de la tabla Esta celda hereda vertical-align: bottom; de la fila de la tabla Este es un texto de marcador de posición, destinado a ocupar bastante espacio vertical, para demostrar cómo funciona la alineación vertical en las celdas anteriores.
Esta celda hereda vertical-align: middle; de la tabla Esta celda hereda vertical-align: middle; de la tabla Esta celda está alineada en la parte superior. Este es un texto de marcador de posición, destinado a ocupar bastante espacio vertical, para demostrar cómo funciona la alineación vertical en las celdas anteriores. 
<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>

Anidamiento

Las tablas anidadas no heredan los estilos de borde, los estilos active y las variantes de tabla.

# Nombre Apellido Handle
1 Mark Otto @mdo
Encabezado Encabezado Encabezado
A Nombre Apellido
B Nombre Apellido
C Nombre Apellido
3 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 secundario (>) en nuestro CSS. Dado que necesitamos apuntar a todos los tds y ths en thead, tbody y tfoot, nuestro selector se vería bastante largo sin él. Como tal, usamos el selector .table > :not(caption) > * > * de aspecto bastante extraño para apuntar a todos los tds y ths de .table, pero no a ninguna de las posibles tablas anidadas.

Ten en cuenta que si agregas <tr>s como elementos secundarios directos de una tabla, esos <tr> se incluirán en un <tbody> de forma predeterminada, lo que hará que nuestros selectores funcionen según lo previsto.

Anatomía

Encabezado de tabla

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

# Nombre Apellido 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>
# Nombre Apellido 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

# Nombre Apellido Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Footer Footer Footer Footer 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Captions

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é se 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>Lista de usuarios</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

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

Lista de usuarios
# Nombre Apellido Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<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">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 responsive permiten que las tablas se desplacen horizontalmente con facilidad. Haz que cualquier tabla responda en todas los viewports envolviendo una .table con .table-responsive. O elije un breakpoint máximo con el que tener una tabla responsive usando .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Recorte/truncamiento vertical

Las tablas responsive 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 responsive

En cada breakpoint, usa .table-responsive para tablas de 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>

Breakpoint specifico

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

Estas tablas pueden aparecer rotas hasta que sus estilos responsive se apliquen a anchos de viewports 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:                 $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:          $border-color;

$table-striped-order:         odd;

$table-group-separator-color: currentColor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

Loop

$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 utilizan para determinar el contraste en las variantes de la tabla.
  • Además de las variantes de tablas claras y oscuras, los colores del tema se aclaran con la variable $table-bg-scale.