Tabelas

Documentação e exemplos para o estilo opt-in de tabelas (dado seu uso predominante em plugins JavaScript) com Bootstrap.

Nesta página

Visão geral

Devido ao uso generalizado de <table>elementos em widgets de terceiros, como calendários e seletores de data, as tabelas do Bootstrap são opcionais . Adicione a classe base .tablea any <table>e, em seguida, estenda com nossas classes modificadoras opcionais ou estilos personalizados. Todos os estilos de tabela não são herdados no Bootstrap, o que significa que qualquer tabela aninhada pode ser estilizada independentemente do pai.

Usando a marcação de tabela mais básica, veja como as .tabletabelas baseadas em Bootstrap se parecem.

#	Primeiro	Último	Lidar com
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry o pássaro		@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 classes contextuais para colorir tabelas, linhas de tabela ou células individuais.

Classe	Cabeçalho	Cabeçalho
Predefinição	Célula	Célula
Primário	Célula	Célula
Secundário	Célula	Célula
Sucesso	Célula	Célula
Perigo	Célula	Célula
Aviso	Célula	Célula
Informações	Célula	Célula
Leve	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>

Transmitindo significado às tecnologias assistivas

Usar cores para adicionar significado fornece apenas uma indicação visual, que não será transmitida aos usuários de tecnologias assistivas – como leitores de tela. Certifique-se de que as informações indicadas pela cor sejam óbvias do próprio conteúdo (por exemplo, o texto visível) ou sejam incluídas por meios alternativos, como texto adicional oculto com a .visually-hiddenclasse.

Tabelas acentuadas

Linhas listradas

Use .table-stripedpara adicionar listras de zebra a qualquer linha da tabela dentro do arquivo <tbody>.

#	Primeiro	Último	Lidar com
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry o pássaro		@Twitter

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

Essas classes também podem ser adicionadas a variantes de tabela:

#	Primeiro	Último	Lidar com
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry o pássaro		@Twitter

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

#	Primeiro	Último	Lidar com
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry o pássaro		@Twitter

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

Linhas flutuantes

Adicione .table-hoverpara habilitar um estado de foco nas linhas da tabela em um arquivo <tbody>.

#	Primeiro	Último	Lidar com
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry o pássaro		@Twitter

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

#	Primeiro	Último	Lidar com
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry o pássaro		@Twitter

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

Essas linhas flutuantes também podem ser combinadas com a variante listrada:

#	Primeiro	Último	Lidar com
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry o pássaro		@Twitter

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

Tabelas ativas

Realce uma linha ou célula da tabela adicionando uma .table-activeclasse.

#	Primeiro	Último	Lidar com
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry o pássaro		@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>

#	Primeiro	Último	Lidar com
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry o pássaro		@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 funcionam as variantes e tabelas acentuadas?

Para as tabelas acentuadas ( linhas listradas , linhas flutuantes e tabelas ativas ), usamos algumas técnicas para fazer esses efeitos funcionarem para todas as nossas variantes de tabela :

Começamos definindo o plano de fundo de uma célula da tabela com a --bs-table-bgpropriedade customizada. Todas as variantes de tabela definem essa propriedade customizada para colorir as células da tabela. Dessa forma, não teremos problemas se cores semitransparentes forem usadas como plano de fundo da tabela.
Em seguida, adicionamos uma sombra de caixa de inserção nas células da tabela com box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);a camada em cima de qualquer arquivo background-color. Como usamos um spread enorme e sem desfoque, a cor ficará monótona. Como --bs-table-accent-bgnão está definido por padrão, não temos uma sombra de caixa padrão.
Quando as classes .table-striped, .table-hoverou são adicionadas, o é definido como uma cor semitransparente para colorir o plano de fundo..table-active--bs-table-accent-bg
Para cada variante de tabela, geramos uma --bs-table-accent-bgcor com o maior contraste dependendo dessa cor. Por exemplo, a cor de destaque para .table-primaryé mais escura enquanto .table-darktem uma cor de destaque mais clara.
As cores do texto e da borda são geradas da mesma maneira e suas cores são herdadas por padrão.

Nos bastidores é assim:

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

Bordas da tabela

Tabelas com bordas

Adicione .table-borderedpara bordas em todos os lados da tabela e células.

#	Primeiro	Último	Lidar com
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry o pássaro		@Twitter

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

Os utilitários de cores de borda podem ser adicionados para alterar as cores:

#	Primeiro	Último	Lidar com
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry o pássaro		@Twitter

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

Mesas sem bordas

Adicionar .table-borderlesspara uma tabela sem bordas.

#	Primeiro	Último	Lidar com
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry o pássaro		@Twitter

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

#	Primeiro	Último	Lidar com
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry o pássaro		@Twitter

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

Mesas pequenas

Adicione .table-smpara tornar .tablemais compacto cortando todas as células paddingao meio.

#	Primeiro	Último	Lidar com
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry o pássaro		@Twitter

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

#	Primeiro	Último	Lidar com
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry o pássaro		@Twitter

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

Alinhamento vertical

As células da tabela <thead>são sempre alinhadas verticalmente na parte inferior. As células da tabela <tbody>herdam seu alinhamento <table>e são alinhadas na parte superior por padrão. Use as classes de alinhamento vertical para realinhar quando necessário.

Cabeçallho 1	Título 2	Título 3	Título 4
Esta célula herda `vertical-align: middle;`da tabela	Esta célula herda `vertical-align: middle;`da tabela	Esta célula herda `vertical-align: middle;`da tabela	Este aqui é um texto de espaço reservado, destinado a ocupar um pouco de espaço vertical, para demonstrar como o alinhamento vertical funciona nas células anteriores.
Esta célula herda `vertical-align: bottom;`da linha da tabela	Esta célula herda `vertical-align: bottom;`da linha da tabela	Esta célula herda `vertical-align: bottom;`da linha da tabela	Este aqui é um texto de espaço reservado, destinado a ocupar um pouco de espaço vertical, para demonstrar como o alinhamento vertical funciona nas células anteriores.
Esta célula herda `vertical-align: middle;`da tabela	Esta célula herda `vertical-align: middle;`da tabela	Esta célula está alinhada ao topo.	Este aqui é um texto de espaço reservado, destinado a ocupar um pouco de espaço vertical, para demonstrar como o alinhamento vertical funciona nas células 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>

Aninhamento

Estilos de borda, estilos ativos e variantes de tabela não são herdados por tabelas aninhadas.

Primeiro

Último

Lidar com

Marca

Otto

@mdo

Cabeçalho	Cabeçalho	Cabeçalho
UMA	Primeiro	Último
B	Primeiro	Último
C	Primeiro	Último

Larry

o pássaro

@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 o aninhamento

Para evitar que qualquer estilo vaze para tabelas aninhadas, usamos o >seletor de combinação filho ( ) em nosso CSS. Como precisamos segmentar todos os tds e ths no thead, tbody, e tfoot, nosso seletor ficaria bem longo sem ele. Como tal, usamos o .table > :not(caption) > * > *seletor de aparência bastante estranha para direcionar todos os tds e ths do .table, mas nenhuma das tabelas aninhadas em potencial.

Observe que, se você adicionar <tr>s como filhos diretos de uma tabela, eles <tr>serão agrupados em a <tbody>por padrão, fazendo com que nossos seletores funcionem conforme o esperado.

Anatomia

Cabeça de mesa

Semelhante a tabelas e tabelas escuras, use as classes modificadoras .table-lightou .table-darkpara fazer <thead>s parecer cinza claro ou escuro.

#	Primeiro	Último	Lidar com
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry	o pássaro	@Twitter

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

#	Primeiro	Último	Lidar com
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry	o pássaro	@Twitter

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

Pé de mesa

#	Primeiro	Último	Lidar com
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry	o pássaro	@Twitter
Rodapé	Rodapé	Rodapé	Rodapé

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

Legendas

A <caption>funciona como um cabeçalho para uma tabela. Ele ajuda os usuários com leitores de tela a encontrar uma tabela e entender do que se trata e decidir se querem lê-la.

Lista de usuários
#	Primeiro	Último	Lidar com
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry o pássaro		@Twitter

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

Você também pode colocar o <caption>no topo da mesa com .caption-top.

Lista de usuários
#	Primeiro	Último	Lidar com
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry	o pássaro	@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>

Tabelas responsivas

As tabelas responsivas permitem que as tabelas sejam roladas horizontalmente com facilidade. Torne qualquer tabela responsiva em todas as janelas de visualização envolvendo um .tablecom .table-responsive. Ou escolha um ponto de interrupção máximo com o qual ter uma tabela responsiva usando .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Corte/truncamento vertical

As tabelas responsivas fazem uso de overflow-y: hidden, que corta qualquer conteúdo que vá além das bordas inferior ou superior da tabela. Em particular, isso pode cortar menus suspensos e outros widgets de terceiros.

Sempre responsivo

Em todos os pontos de interrupção, use .table-responsivepara tabelas de rolagem horizontal.

#	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho
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>

Ponto de interrupção específico

Use .table-responsive{-sm|-md|-lg|-xl|-xxl}conforme necessário para criar tabelas responsivas até um ponto de interrupção específico. A partir desse ponto de interrupção, a tabela se comportará normalmente e não rolará horizontalmente.

Essas tabelas podem parecer quebradas até que seus estilos responsivos se apliquem a larguras de janela de visualização específicas.

#	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho
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

#	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho
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

#	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho
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

#	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho
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

#	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho
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

#	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho
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

Variáveis

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

Ciclo

$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,
);

Personalização

As variáveis fatoriais ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) são usadas para determinar o contraste nas variantes da tabela.
Além das variantes de mesa claras e escuras, as cores do tema são iluminadas pela $table-bg-levelvariável.