Tabelas

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;
}