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 opt-in . 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
<tableclass="table"><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>
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 --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><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-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>
Transmitindo significado às tecnologias assistivas
O uso de 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
<tableclass="table table-striped">
...
</table>
Essas classes também podem ser adicionadas a 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.
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 é 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 é 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 é 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.
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr>
...
</tr></thead><tbody><tr>
...
</tr><trclass="align-bottom">
...
</tr><tr><td>...</td><td>...</td><tdclass="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.
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 segmentar 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 um<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.
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 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
<tableclass="table caption-top"><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|-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.
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.
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.