Tabelas · Bootstrap em Português
Opções de cabeçalhos para tabelas
Linhas zebradas
Tabela pequena
Sempre responsiva
Breakpoint específico
Documentação e exemplos para inclusão de diferentes tipos de tabelas (de acordo com sua necessidade de plugins JavaScript), no Bootstrap.
Devido ao abrangente uso de tabelas em widgets de terceiros, como calendários e selecionadores da datas, nós desenvolvemos nossas tabelas de forma que sejam alternativas. Basta adicionar a classe .table em qualquer <table>, então, customize-a mais usando nossos estilos de costumização ou as diversas classes modificadoras.
Usando a marcação mais básica para tabelas, assim é como tabelas usando .table irão parecer, no Bootstrap. Todos os estilos de tabelas são herdados no Bootstrap 4, significando que qualquer tabela aninhada vai se comportar do mesmo modo que seus pais.
<th scope="col">Primeiro</th>
<th scope="col">Último</th>
Você também pode inverter as cores (texto claro em background escuro), usando a class .table-dark.
Similar as tabelas comuns e tabelas escuras, use as classes modificadoras .thead-light ou thead-dark para fazer o <thead> ser mais claro ou escuro.
Use .table-striped para adicionar listras zebradas para qualquer <tbody>.
Use .table-bordered para colocar bordas em todos os lados da tabela e suas células.
Use .table-borderless para ter uma tabela sem bordas.
.table-borderless também pode ser usada em tabelas mais escuras.
Utilize .table-hover para ativar um efeito hover, nas linhas dentro do <tbody>.
Use .table-sm para fazer com que as tabelas fiquem mais compactas, já que o padding das células serão cortados ao meio.
Use classes contextuais para colorir linhas ou células da tabela.
<!-- Em linhas -->
<!-- Em células (`td` ou `th`) -->
Variantes de background não estão disponíveis em tabelas escuras, mas você pode usar utilitários de texto ou background para atingir estilos similares.
Crie tabelas responsivas envolvendo qualquer .table com .table-responsive{-sm|-md|-lg|-xl}, fazendo a tabela ter rolagem horizontal em cada breakpoint de max-width, por volta de (não extamente) 576px, 768px, 992px e 1120px, respectivamente.
Perceba: já que browsers não suportam, atualmente, range context queries, nós contornamos as limitações dos prefixos min- e max- e viewports com larguras fracionais (pode ocorrer em algumas circunstâncias, em dispositivos de alta dpi), usando valores com precisão maior para estas comparações.
Um <caption> funciona como um cabeçalho para a tabela. Isso ajuda usários de screen readers achar uma tabela e descobrir sobre oquê é e decidir se eles querem lê-la.
<caption>Lista de usuários</caption>
Tabelas responsivas permitem tabelas serem roladas horizontalmente, com facilidade. Faça com que qualquer tabela seja responsiva em todas viewports, simplesmente, envolvendo um .table com .table-responsive. Além disso, você pode escolher um breakpoint máximo para a tabela ser responsiva, usando a classe .table-responsive{-sm|-md|-lg|-xl}.
Tabelas responsivas usam overflow-y: hidden, declaração a qual corta qualquer conteúdo que vai além da borda de cima ou de baixo, numa tabela. Em particular, isso pode acabar cortando menus dropdowns e outros widgets de terceiros.
Use .table-responsive para fazer que tabelas rolem horizontalmente, através de todos dispositivos.
Célula Célula Célula Célula Célula Célula Célula Célula Célula
Use .table-responsive{-sm|-md|-lg|-xl} sempre que necessário, para criar tabelas responsivas em um breakpoint específico. Desse breakpoint pra cima, a tabela vai se comportar normalmente e não vai rolar horizontalmente.