Mesas

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

Visión general

Debido al uso generalizado de <table>elementos en widgets de terceros, como calendarios y selectores de fechas, las tablas de Bootstrap son opcionales . Agregue la clase base .tablea cualquier <table>, luego amplíe con nuestras clases de modificadores opcionales o estilos personalizados. Todos los estilos de tabla no 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 .tablese ven las tablas basadas en Bootstrap.

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

variantes

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

Clase	Bóveda	Bóveda
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 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 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 .visually-hiddenclase.

Tablas acentuadas

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">
  ...
</table>

columnas rayadas

Úselo .table-striped-columnspara agregar rayas de cebra a cualquier columna de la tabla.

#	Primero	Ultimo	Resolver
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry el pájaro		@gorjeo

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

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

#	Primero	Ultimo	Resolver
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry el pájaro		@gorjeo

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

#	Primero	Ultimo	Resolver
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry el pájaro		@gorjeo

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

#	Primero	Ultimo	Resolver
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry el pájaro		@gorjeo

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

#	Primero	Ultimo	Resolver
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry el pájaro		@gorjeo

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

#	Primero	Ultimo	Resolver
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry el pájaro		@gorjeo

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

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

#	Primero	Ultimo	Resolver
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry el pájaro		@gorjeo

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

Mesas activas

Resalte una fila o celda de la tabla agregando una .table-activeclase.

#	Primero	Ultimo	Resolver
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry el pájaro		@gorjeo

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

<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 desplazables y tablas activas ), utilizamos algunas técnicas para hacer que estos efectos funcionen para todas nuestras variantes de tablas :

Comenzamos configurando el fondo de una celda de tabla con la --bs-table-bgpropiedad personalizada. 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 mesa.
Luego, agregamos una sombra de cuadro insertada en las celdas de la tabla con box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);una capa encima de cualquier archivo background-color. Debido a que usamos una gran extensión y sin desenfoque, el color será monótono. Dado --bs-table-accent-bgque no está configurado de forma predeterminada, no tenemos una sombra de cuadro predeterminada.
Cuando se agregan las clases , o .table-striped, se establece en un color semitransparente para colorear el fondo..table-striped-columns.table-hover.table-active--bs-table-accent-bg
Para cada variante de mesa, generamos un --bs-table-accent-bgcolor con el mayor contraste dependiendo de ese color. Por ejemplo, el color de acento para .table-primaryes más oscuro mientras que .table-darktiene 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 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));

    --#{$prefix}table-color: #{$color};
    --#{$prefix}table-bg: #{$background};
    --#{$prefix}table-border-color: #{$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 la tabla

Tablas bordeadas

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">
  ...
</table>

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

#	Primero	Ultimo	Resolver
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry el pájaro		@gorjeo

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

Mesas 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">
  ...
</table>

#	Primero	Ultimo	Resolver
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry el pájaro		@gorjeo

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

Mesas pequeñas

Agregue .table-smpara hacer .tablemás compacto cortando toda la celda paddingpor 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">
  ...
</table>

#	Primero	Ultimo	Resolver
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry el pájaro		@gorjeo

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

Separadores de grupos de mesa

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

#	Primero	Ultimo	Resolver
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry el pájaro		@gorjeo

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>

Alineamiento vertical

Las celdas de la tabla <thead>siempre están alineadas verticalmente hacia abajo. Las celdas de la tabla <tbody>heredan su alineación <table>y se alinean en la parte superior de forma predeterminada. Use las clases de alineación vertical para volver a alinear donde sea necesario.

Título 1	Título 2	Título 3	Título 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">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Anidamiento

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

Primero

Ultimo

Resolver

Marca

Otón

@mdo

Encabezamiento	Encabezamiento	Encabezamiento
A	Primero	Ultimo
B	Primero	Ultimo
C	Primero	Ultimo

larry

el pájaro

@gorjeo

<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 los estilos se filtren a las tablas anidadas, usamos el >selector combinador secundario ( ) en nuestro CSS. Dado que necesitamos apuntar a todos los tds y ths en thead, tbodyy tfoot, nuestro selector se vería bastante largo sin él. Como tal, usamos el .table > :not(caption) > * > *selector de aspecto bastante extraño para apuntar a todas las tds y ths del .table, pero ninguna de las posibles tablas anidadas.

Tenga en cuenta que si agrega <tr>s como hijos directos de una tabla, estos <tr>se incluirán en un <tbody>de forma predeterminada, lo que hará que nuestros selectores funcionen según lo previsto.

Anatomía

cabeza de mesa

Al igual que las tablas y las tablas oscuras, use las clases de modificadores .table-lighto .table-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

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

#	Primero	Ultimo	Resolver
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry	el pájaro	@gorjeo

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

pie de mesa

#	Primero	Ultimo	Resolver
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry	el pájaro	@gorjeo
Pie de página	Pie de página	Pie de página	Pie de página

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

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 table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

También puedes poner el <caption>en la parte superior de la mesa con .caption-top.

Lista de usuarios
#	Primero	Ultimo	Resolver
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry	el pájaro	@gorjeo

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

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

#	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

#	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

#	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

#	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

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

Hablar con descaro a

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

Círculo

$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 tabla.
Además de las variantes de mesa clara y oscura, los colores del tema se aclaran con la $table-bg-scalevariable.