Bootstrap 4 Tabelas

Tabela Básica Bootstrap 4

Uma mesa básica Bootstrap 4 tem um preenchimento leve e divisores horizontais.

A .tableclasse adiciona estilo básico a uma tabela:

Linhas listradas

A .table-stripedclasse adiciona listras de zebra a uma tabela:

Tabela com bordas

A .table-borderedclasse adiciona bordas em todos os lados da tabela e células:

Linhas ao passar o mouse

A .table-hoverclasse adiciona um efeito de foco (cor de fundo cinza) nas linhas da tabela:

Mesa preta/escura

A .table-darkclasse adiciona um fundo preto à tabela:

Mesa Listrada Escura

Combine .table-darke .table-stripedpara criar uma mesa escura e listrada:

Mesa escura flutuante

A .table-hoverclasse adiciona um efeito de foco (cor de fundo cinza) nas linhas da tabela:

Tabela sem bordas

A .table-borderlessclasse remove as bordas da tabela:

Classes contextuais

As classes contextuais podem ser usadas para colorir toda a tabela ( <table>), as linhas da tabela ( <tr>) ou as células da tabela ( <td>).

As classes contextuais que podem ser usadas são:

Cores da Cabeça da Mesa

A .thead-darkclasse adiciona um plano de fundo preto aos cabeçalhos das tabelas e a .thead-lightclasse adiciona um plano de fundo cinza aos cabeçalhos das tabelas:

Pequena mesa

A .table-smclasse torna a tabela menor cortando o preenchimento da célula pela metade:

Tabelas responsivas

A .table-responsiveclasse adiciona uma barra de rolagem à tabela quando necessário (quando é muito grande horizontalmente):

Você também pode decidir quando a tabela deve receber uma barra de rolagem, dependendo da largura da tela: