Documentação e exemplos para inclusão de diferentes tipos de tabelas (de acordo com sua necessidade de plugins JavaScript), no Bootstrap.
Exemplos
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.
#
Primeiro
Último
Nickname
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Você também pode inverter as cores (texto claro em background escuro), usando a class .table-dark.
#
Primeiro
Último
Nickname
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Opções de cabeçalhos para tabelas
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.
#
Primeiro
Último
Nickname
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
#
Primeiro
Último
Nickname
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Linhas zebradas
Use .table-striped para adicionar listras zebradas para qualquer <tbody>.
#
Primeiro
Último
Nickname
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
#
Primeiro
Último
Nickname
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Tabela com bordas
Use .table-bordered para colocar bordas em todos os lados da tabela e suas células.
#
Primeiro
Último
Nickname
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
#
Primeiro
Último
Nickname
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Tabela sem bordas
Use .table-borderless para ter uma tabela sem bordas.
#
Primeiro
Último
Nickname
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
.table-borderless também pode ser usada em tabelas mais escuras.
#
Primeiro
Último
Nickname
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Linhas com efeito hover
Utilize .table-hover para ativar um efeito hover, nas linhas dentro do <tbody>.
#
Primeiro
Último
Nickname
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
#
Primeiro
Último
Nickname
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Tabela pequena
Use .table-sm para fazer com que as tabelas fiquem mais compactas, já que o padding das células serão cortados ao meio.
#
Primeiro
Último
Nickname
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
#
Primeiro
Último
Nickname
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Classes contextuais
Use classes contextuais para colorir linhas ou células da tabela.
Classe
Cabeçalho
Cabeçalho
Ativo
Célula
Célula
Padrão
Célula
Célula
Primary
Célula
Célula
Secondary
Célula
Célula
Success
Célula
Célula
Danger
Célula
Célula
Warning
Célula
Célula
Info
Célula
Célula
Light
Célula
Célula
Dark
Célula
Célula
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.
#
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
Transmitindo significado a tecnologias assistivas
Usando cor para adicionar significado só fornece uma indicação visual, a qual não será transmitida para usuários de tecnologias assistivas (como leitores de telas). Se assegure que a informação denotada pela cor é tanto destacada do conteúdo (ex: o texto visível) ou está incluída em meios alternativos, como textos extras escondidos com a classe .sr-class.
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.
Legendas
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.
Lista de usuários
#
Primeiro
Último
Nickname
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Tabelas responsivas
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}.
Corte vertical
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.
Sempre responsiva
Use .table-responsive para fazer que tabelas rolem horizontalmente, através de todos dispositivos.
#
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
Breakpoint específico
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.
These tables may appear broken until their responsive styles apply at specific viewport widths.