Tables

Tables are built as in standard HTML. When the width of the device is less than 400px the table rows become cards and the headers are hidden.

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>

Resize your browser to see the objects behave as described.

Style

The table already comes with a color definition with an odd, even pattern. To change, overwrite the excerpt described below.

tr:nth-child(even) {
  background: #e8e8e8;
}
tr:nth-child(odd) {
  background: #f3f3f3;
}