Táboas

Documentación e exemplos para o estilo de opción de táboas (dado o seu uso predominante nos complementos de JavaScript) con Bootstrap.

Nesta páxina

Visión xeral

Debido ao uso xeneralizado de <table>elementos en widgets de terceiros como calendarios e seleccionadores de datas, as táboas de Bootstrap están activadas . Engade a clase base .tablea calquera <table>e, a continuación, estenda coas nosas clases modificadoras opcionais ou estilos personalizados. Todos os estilos de táboas non se herdan en Bootstrap, o que significa que calquera táboa aniñada pode ter un estilo independente do pai.

Usando o marcado de táboas máis básico, velaí como .tablese ven as táboas baseadas en Bootstrap.

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@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

Use clases contextuais para colorear táboas, filas de táboas ou celas individuais.

Clase	Título	Título
Por defecto	Célula	Célula
Primaria	Célula	Célula
Secundaria	Célula	Célula
Éxito	Célula	Célula
Perigo	Célula	Célula
Aviso	Célula	Célula
Información	Célula	Célula
Luz	Célula	Célula
Escuro	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 ás tecnoloxías de asistencia

Usar cor para engadir significado só proporciona unha indicación visual, que non se transmitirá aos usuarios de tecnoloxías auxiliares, como lectores de pantalla. Asegúrese de que a información indicada pola cor sexa obvia desde o propio contido (por exemplo, o texto visible) ou se inclúa a través de medios alternativos, como o texto adicional oculto coa .visually-hiddenclase.

Táboas acentuadas

Filas a raias

Utilízao .table-stripedpara engadir franxas de cebra a calquera fila da táboa dentro do <tbody>.

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@twitter

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

Estas clases tamén se poden engadir ás variantes da táboa:

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@twitter

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

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@twitter

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

Filas flotables

Engadir .table-hoverpara activar un estado de paso nas filas da táboa dentro dun <tbody>.

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@twitter

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

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@twitter

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

Estas filas flotables tamén se poden combinar coa variante de raias:

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@twitter

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

Táboas activas

Resalte unha fila ou cela dunha táboa engadindo unha .table-activeclase.

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@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>

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@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>

Como funcionan as variantes e as táboas acentuadas?

Para as táboas acentuadas ( filas con raias , filas flotables e táboas activas ), utilizamos algunhas técnicas para que estes efectos funcionen en todas as nosas variantes de táboa :

Comezamos configurando o fondo dunha cela da táboa coa --bs-table-bgpropiedade personalizada. Todas as variantes da táboa establecen entón esa propiedade personalizada para colorear as celas da táboa. Deste xeito, non nos metemos en problemas se se usan cores semitransparentes como fondos de táboa.
A continuación, engadimos unha sombra de caixa inserida nas celas da táboa con box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);a capa encima de calquera especificado background-color. Debido a que usamos unha gran extensión e sen desenfoque, a cor será monótona. Dado --bs-table-accent-bgque non está configurado por defecto, non temos unha sombra de caixa predeterminada.
Cando se engaden .table-striped, .table-hoverou .table-activeclases, --bs-table-accent-bgestablécese nunha cor semitransparente para colorear o fondo.
Para cada variante da táboa, xeramos unha --bs-table-accent-bgcor con maior contraste dependendo desa cor. Por exemplo, a cor de acento para .table-primaryé máis escura mentres .table-darkque ten unha cor de acento máis clara.
As cores do texto e dos bordos xéranse da mesma forma e as súas cores herdanse por defecto.

Detrás das escenas parece isto:

@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));

    --#{$variable-prefix}table-bg: #{$background};
    --#{$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: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

Bordes da táboa

Mesas con bordes

Engade .table-borderedos bordos en todos os lados da táboa e das celas.

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@twitter

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

Pódense engadir utilidades de cor de bordo para cambiar as cores:

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@twitter

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

Mesas sen bordes

Engadir .table-borderlesspara unha táboa sen bordos.

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@twitter

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

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@twitter

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

Mesas pequenas

Engade .table-smpara facer .tablemáis compacto cortando todas as células paddingpola metade.

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@twitter

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

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@twitter

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

Aliñación vertical

As celas da táboa <thead>sempre están aliñadas verticais cara á parte inferior. As celas da táboa <tbody>herdan o seu aliñamento <table>e están aliñadas na parte superior por defecto. Use as clases de aliñamento vertical para aliñar onde sexa necesario.

Título 1	Título 2	Título 3	Título 4
Esta cela herda `vertical-align: middle;`da táboa	Esta cela herda `vertical-align: middle;`da táboa	Esta cela herda `vertical-align: middle;`da táboa	Este é un texto de marcador de posición, destinado a ocupar bastante espazo vertical, para demostrar como funciona o aliñamento vertical nas celas anteriores.
Esta cela herda `vertical-align: bottom;`da fila da táboa	Esta cela herda `vertical-align: bottom;`da fila da táboa	Esta cela herda `vertical-align: bottom;`da fila da táboa	Este é un texto de marcador de posición, destinado a ocupar bastante espazo vertical, para demostrar como funciona o aliñamento vertical nas celas anteriores.
Esta cela herda `vertical-align: middle;`da táboa	Esta cela herda `vertical-align: middle;`da táboa	Esta cela está aliñada na parte superior.	Este é un texto de marcador de posición, destinado a ocupar bastante espazo vertical, para demostrar como funciona o aliñamento vertical nas celas 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>

Aniñación

Os estilos de bordo, os estilos activos e as variantes de táboas non herdan as táboas aniñadas.

Primeira

Último

Manexar

Marcos

Oto

@mdo

Cabeceira	Cabeceira	Cabeceira
A	Primeira	Último
B	Primeira	Último
C	Primeira	Último

Larry

o paxaro

@twitter

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

Como funciona a anidación

Para evitar que ningún estilo se filtre ás táboas aniñadas, usamos o >selector combinador fillo ( ) no noso CSS. Dado que necesitamos orientar todos os tds e ths en thead, tbody, e tfoot, o noso selector parecería bastante longo sen el. Como tal, usamos o .table > :not(caption) > * > *selector de aspecto bastante estraño para apuntar a todos os tds e ths do .table, pero ningunha das posibles táboas aniñadas.

Teña en conta que se engade <tr>s como fillos directos dunha táboa, estes <tr>estarán envoltos nun a <tbody>por defecto, facendo que os nosos selectores funcionen como se pretende.

Anatomía

Cabeza de mesa

Semellante ás táboas e ás táboas escuras, use as clases modificadoras .table-lightou .table-darkpara que <thead>s apareza en gris claro ou escuro.

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry	o paxaro	@twitter

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

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry	o paxaro	@twitter

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

Pé de mesa

#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry	o paxaro	@twitter
Pé de páxina	Pé de páxina	Pé de páxina	Pé de páxina

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

Subtítulos

A <caption>funciona como un título para unha táboa. Axuda aos usuarios con lectores de pantalla a atopar unha táboa e comprender de que se trata e decidir se queren lela.

Lista de usuarios
#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@twitter

<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Tamén podes poñer o <caption>enriba da mesa con .caption-top.

Lista de usuarios
#	Primeira	Último	Manexar
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry	o paxaro	@twitter

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

Táboas sensibles

As táboas sensibles permiten desprazarse horizontalmente con facilidade. Fai que calquera táboa responda en todas as ventanas gráficas envolvendo un .tablecon .table-responsive. Ou escolle un punto de interrupción máximo co que queiras ter unha táboa receptiva usando .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Recorte/truncamento vertical

As táboas sensibles fan uso de overflow-y: hidden, que recorta calquera contido que vaia máis aló dos bordos inferior ou superior da táboa. En particular, isto pode cortar os menús despregables e outros widgets de terceiros.

Sempre receptivo

En cada punto de interrupción, úsao .table-responsivepara táboas de desprazamento horizontal.

#	Título	Título	Título	Título	Título	Título	Título	Título	Título
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

Utilízase .table-responsive{-sm|-md|-lg|-xl|-xxl}segundo sexa necesario para crear táboas receptivas ata un punto de interrupción particular. A partir dese punto de interrupción, a táboa comportarase normalmente e non desprazarase horizontalmente.

Estas táboas poden aparecer rotas ata que os seus estilos de resposta se apliquen a anchos de visualización específicos.

#	Título	Título	Título	Título	Título	Título	Título	Título
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

#	Título	Título	Título	Título	Título	Título	Título	Título
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

#	Título	Título	Título	Título	Título	Título	Título	Título
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

#	Título	Título	Título	Título	Título	Título	Título	Título
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

#	Título	Título	Título	Título	Título	Título	Título	Título
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

#	Título	Título	Título	Título	Título	Título	Título	Título
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>

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

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

As variables do factor ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) úsanse para determinar o contraste nas variantes da táboa.
Ademais das variantes de táboas claras e escuras, as cores do tema son iluminadas pola $table-bg-levelvariable.