Tabelas
Exibindo dados tabulares.
Perceba que para deixar os títulos de colunas com marcação de ordenação, basta utilizar as classes dataDescending ou dataAscending.
Tabela no padrão do bootstrap utilizamos a classe .table
. Esse tipo de tabela não possue bordas laterais.
Classes que manipulam o estilo da tabela padrão.
Para alterar o estilo da tabela padrão com a classe .table
, basta adicionar as classes abaixo:
table-bordered
: adiciona borda
table-striped
: adiciona background nas linhas ímpares
table-hover
: adiciona background ao passar o mouse
Nome do cliente | # do pedido | Data - Hora | Status | Valor | Ações | |
---|---|---|---|---|---|---|
Helena da Silva | 74994 | 14/03/12 - 11h25 | Autorizada | R$ 297,00 | Ver Detalhes | Estornar |
Helena da Silva | 74994 | 14/03/12 - 11h25 | Autorizada | R$ 297,00 | Ver Detalhes | Estornar |
Helena da Silva | 74994 | 14/03/12 - 11h25 | Autorizada | R$ 297,00 | Ver Detalhes | Estornar |
Tabela com a classe tableList
Usamos tabelas para listar informações tabulares o tempo inteiro. Os padrões do Bootstrap ainda continuam, logo, se quiser utilizar o estilo de tabelas que o Bootstrap oferece, fique à vontade. Se quiser a nossa versão, basta inserir a classe tableList
na tabela pra ter o visual abaixo:
Nome do cliente | # do pedido | Data - Hora | Status | Valor | Ações | |
---|---|---|---|---|---|---|
Helena da Silva | 74994 | 14/03/12 - 11h25 | Autorizada | R$ 297,00 | Ver Detalhes | Estornar |
Helena da Silva | 74994 | 14/03/12 - 11h25 | Autorizada | R$ 297,00 | Ver Detalhes | Estornar |
Helena da Silva | 74994 | 14/03/12 - 11h25 | Autorizada | R$ 297,00 | Ver Detalhes | Estornar |