- Sobre
- Instalação
- Exemplo
Css
- Grid
- Imagens
- Tabelas
- Estilos
Componentes
- Cabeçalhos
- Botões
- Forms
- Cards
- Rodapé
Javascript
- Menu lateral
- Modais
- Slider
As tabelas são construídas como no HTML padrão. Quando a largura do dispositivo for menor que 400px as linhas das tabelas viram cards e os headers ficam ocultos.
Header 1 | Header 2 |
---|---|
content 1 | content 2 |
content 3 | content 4 |
<table>
<thead>
<th>
Header 1
</th>
<th>
Header 2
</th>
</thead>
<tbody>
<tr>
<td>content 1</td>
<td>content 2</td>
</tr>
<tr>
<td>content 3</td>
<td>content 4</td>
</tr>
</tbody>
</table>
Redimensione o seu navegador para ver os objetos se comportarem conforme descrito.
Estilos
A tabela já vem com uma definição de cores com padrão ímpar, par. Para alterar, sobrescreva o trecho descrito abaixo.
tr:nth-child(even) {
background: #e8e8e8;
}
tr:nth-child(odd) {
background: #f3f3f3;
}
Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus.