Bootstrap tabela básico
A base Bootstrap tabela tem um acolchoamento leve e apenas divisores horizontais.
O .table classe adiciona estilo básico para uma tabela:
Exemplo
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Fileiras listradas
O .table-striped classe acrescenta zebra-listras em uma tabela:
Exemplo
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Tabela delimitada
A .table-bordered classe adiciona fronteiras em todos os lados da tabela e células:
Exemplo
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
linhas Hover
O .table-hover classe permite que um estado de foco em linhas de tabela:
Exemplo
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Tabela condensada
O .table-condensed classe faz uma tabela mais compacta, reduzindo o preenchimento da célula ao meio:
Exemplo
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Classes contextuais
Aulas contextuais pode ser usado para linhas de tabela de cores ( <tr> ) ou células de tabela ( <td> ):
Exemplo
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
As classes contextuais que podem ser utilizados são:
| Classe | Descrição |
|---|---|
.active | Aplica-se a cor de foco para a linha da tabela ou célula de tabela |
.success | Indica uma ação bem-sucedida ou positivo |
.info | Indica uma alteração informativa neutra ou ação |
.warning | Indica um aviso de que pode precisar de atenção |
.danger | Indica uma ação perigosa ou potencialmente negativo |
Tabelas Responsive
O .table-responsive classe cria uma tabela responsivo. A tabela será então rolar horizontalmente em dispositivos pequenos (menos de 768px). Ao visualizar em qualquer coisa maior do que 768px de largura, não há diferença:
Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 » Exercício 6»
completa Bootstrap Table Reference Bootstrap Table Reference
Para uma referência completa de todas as classes da tabela, ir para a nossa completa Bootstrap Referência Tabelas .