Tabelas Bootstrap 5

Tabela básica

Uma tabela básica Bootstrap 5 com um pouco de espaçamento interno e linha horizontal de separação.

.table Adicione estilo básico à tabela:

Exemplo

Experimente pessoalmente

Linhas com listras

.table-striped Adicione listras zebra à tabela:

Exemplo

Experimente pessoalmente

Tabela com borda

.table-bordered Adicione borda para todos os lados da tabela e das células:

Exemplo

Experimente pessoalmente

Linhas com efeito de sobreposição

.table-hover Adicione efeito de sobreposição (fundo cinza) à linha da tabela:

Exemplo

Experimente pessoalmente

Tabela preta/escura

.table-dark Adicione fundo preto para a tabela:

Exemplo

Experimente pessoalmente

Tabela com listras escuras

combinar .table-dark E .table-striped Para criar uma tabela com listras escuras:

Exemplo

Experimente pessoalmente

Tabela escuro com efeito de sobreposição

.table-hover Adicione efeito de sobreposição (fundo cinza) à linha da tabela:

Exemplo

Experimente pessoalmente

Tabela sem borda

.table-borderless Remova a borda do quadrado da tabela:

Exemplo

Experimente pessoalmente

Classes de contexto

Classes de contexto podem ser usadas para toda a tabela (<table>) ou linha da tabela (<tr>) ou célula da tabela (<td>) coloração.

Exemplo

Experimente pessoalmente

Classes de contexto disponíveis:

Classe Descrição
.table-primary Azul: representa ações importantes.
.table-success Verde: representa ações de sucesso ou positivas.
.table-danger Vermelho: representa perigo ou comportamento negativo potencial.
.table-info Azul claro: representa mudanças de informações neutras ou operações.
.table-warning Laranja: representa alertas que podem precisar de atenção.
.table-active Cinza: aplica cor de sobreposição à linha da tabela ou célula da tabela.
.table-secondary Cinza: representa ações de menor importância.
.table-light Fundo cinza claro da tabela ou linha da tabela.
.table-dark Fundo cinza escuro da tabela ou linha da tabela.

Cor do cabeçalho da tabela

Você também pode usar qualquer classe de contexto para adicionar cor de fundo apenas ao título da tabela:

Exemplo

Experimente pessoalmente

Tabela pequena

.table-sm Classe diminui o tamanho da tabela dividindo a preenchimento das células ao meio:

Exemplo

Experimente pessoalmente

Tabela responsiva

.table-responsive Classe adiciona a barra de rolagem à tabela quando necessário (quando ela é muito grande na direção horizontal):

Exemplo

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Experimente pessoalmente

Você ainda pode decidir quando a tabela deve obter a barra de rolagem, dependendo da largura da tela:

Classe Largura da tela
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

Exemplo

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

Experimente pessoalmente