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 |
<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 |
<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 |
| # | Primeiro | Último | Lidar com |
|---|---|---|---|
| 1 | Marca | Otto | @mdo |
| 2 | Jacó | Thornton | @gordo |
| 3 | Larry | o pássaro |
<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 |
<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 |
<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 | ||
<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 | ||
<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>Mesa sem borda
Adicionar .table-borderlesspara uma tabela sem bordas.
| # | Primeiro | Último | Lidar com |
|---|---|---|---|
| 1 | Marca | Otto | @mdo |
| 2 | Jacó | Thornton | @gordo |
| 3 | Larry o pássaro | ||
<table class="table table-borderless">
<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>.table-borderlesstambém pode ser usado em mesas escuras.
| # | Primeiro | Último | Lidar com |
|---|---|---|---|
| 1 | Marca | Otto | @mdo |
| 2 | Jacó | Thornton | @gordo |
| 3 | Larry o pássaro | ||
<table class="table table-borderless 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 | ||
<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 | ||
<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 | ||
<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 | ||
<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.
| # | Primeiro | Último | Lidar com |
|---|---|---|---|
| 1 | Marca | Otto | @mdo |
| 2 | Jacó | Thornton | @gordo |
| 3 | Larry | o pássaro |
<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.
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 |
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>| # | 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-md">
<table class="table">
...
</table>
</div>| # | 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-lg">
<table class="table">
...
</table>
</div>| # | 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-xl">
<table class="table">
...
</table>
</div>