Source

Tabelas

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

Exemplos

Devido ao uso generalizado de tabelas em widgets de terceiros, como calendários e seletores de data, projetamos nossas tabelas para serem opt-in . Basta adicionar a classe base .tablea qualquer <table>, depois estender com estilos personalizados ou nossas várias classes modificadoras incluídas.

Usando a marcação de tabela mais básica, veja como as .tabletabelas baseadas em Bootstrap se parecem. Todos os estilos de tabela são herdados no Bootstrap 4 , o que significa que qualquer tabela aninhada será estilizada da mesma maneira que o pai.

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

Você também pode inverter as cores—com texto claro em fundos escuros—com .table-dark.

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

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

Opções de cabeça de mesa

Semelhante a tabelas e tabelas escuras, use as classes modificadoras .thead-lightou .thead-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

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

<table class="table">
  <thead class="thead-dark">
    <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>

<table class="table">
  <thead class="thead-light">
    <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>

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

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

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

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

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

<table class="table table-bordered table-dark">
  <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>

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

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

<table class="table table-hover table-dark">
  <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>

Pequena mesa

Adicione .table-smpara tornar as tabelas mais compactas cortando o preenchimento das células pela metade.

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

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

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

<table class="table table-sm table-dark">
  <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>

Classes contextuais

Use classes contextuais para colorir linhas da tabela ou células individuais.

Classe	Cabeçalho	Cabeçalho
Ativo	Célula	Célula
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 rows -->
<tr class="table-active">...</tr>

<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-active">...</td>

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

As variantes de plano de fundo da tabela regular não estão disponíveis com a tabela escura, no entanto, você pode usar utilitários de texto ou plano de fundo para obter estilos semelhantes.

#	Cabeçalho	Cabeçalho
1	Célula	Célula
2	Célula	Célula
3	Célula	Célula
4	Célula	Célula
5	Célula	Célula
6	Célula	Célula
7	Célula	Célula
8	Célula	Célula
9	Célula	Célula

<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</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 .sr-onlyclasse.

Crie tabelas responsivas envolvendo qualquer uma .tablecom .table-responsive{-sm|-md|-lg|-xl}, fazendo a tabela rolar horizontalmente em cada max-widthponto de interrupção de até (mas não incluindo) 576px, 768px, 992px e 1120px, respectivamente.

Observe que, como os navegadores atualmente não suportam consultas de contexto de intervalo , contornamos as limitações min-e max-prefixos e viewports com larguras fracionárias (o que pode ocorrer sob certas condições em dispositivos de alto dpi, por exemplo) usando valores com maior precisão para essas comparações .

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

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

#	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho
1	Célula	Célula	Célula	Célula	Célula
2	Célula	Célula	Célula	Célula	Célula
3	Célula	Célula	Célula	Célula	Célula

#	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho
1	Célula	Célula	Célula	Célula	Célula
2	Célula	Célula	Célula	Célula	Célula
3	Célula	Célula	Célula	Célula	Célula

#	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho
1	Célula	Célula	Célula	Célula	Célula
2	Célula	Célula	Célula	Célula	Célula
3	Célula	Célula	Célula	Célula	Célula

#	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho	Cabeçalho
1	Célula	Célula	Célula	Célula	Célula
2	Célula	Célula	Célula	Célula	Célula
3	Célula	Célula	Célula	Célula	Célula

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