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.
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
<tableclass="table table-bordered"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="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
<tableclass="table table-bordered table-dark"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="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
@Twitter
<tableclass="table table-borderless"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="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
@Twitter
<tableclass="table table-borderless table-dark"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="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
<tableclass="table table-hover"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="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
<tableclass="table table-hover table-dark"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="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
<tableclass="table table-sm"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="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
<tableclass="table table-sm table-dark"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="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 --><trclass="table-active">...</tr><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-active">...</td><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="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 --><trclass="bg-primary">...</tr><trclass="bg-success">...</tr><trclass="bg-warning">...</tr><trclass="bg-danger">...</tr><trclass="bg-info">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="bg-primary">...</td><tdclass="bg-success">...</td><tdclass="bg-warning">...</td><tdclass="bg-danger">...</td><tdclass="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
<tableclass="table"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="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.
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.