Table

Easily create nicely looking tables, which come in different styles.

Usage

Basic table (.c-table)

Caption
Table Heading	Table Heading	Table Heading
Table footer	Table footer	Table footer
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data

<table class="c-table">
  <caption>...</caption>
  <thead>
  <tr>
    <th>...</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <th>...</th>
  </tr>
  </tfoot>
  <tbody>
  <tr>
    <td>...</td>
  </tr>
  </tbody>
</table>

Modifiers

Divider (.c-table--divider)

Caption
Table Heading	Table Heading	Table Heading
Table footer	Table footer	Table footer
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data

<table class="c-table c-table--divider">
  <caption>...</caption>
  <thead>
  <tr>
    <th>Table Heading</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Table Data</td>
  </tr>
  </tbody>
</table>

Table striped

Caption
Table Heading	Table Heading	Table Heading
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data

<table class="c-table c-table--striped">
  <caption>Caption</caption>
  <thead>
  <tr>
    <th>Table Heading</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Table Data</td>
  </tr>
  </tbody>
</table>

Table condensed

Caption
Table Heading	Table Heading	Table Heading
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data

<table class="c-table c-table--condensed">
  <caption>Caption</caption>
  <thead>
  <tr>
    <th>Table Heading</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Table Data</td>
  </tr>
  </tbody>
</table>

Table yaxis

Caption
Table Heading	Table Heading	Table Heading
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data

<table class="c-table--vertical">
  <caption>Caption</caption>
  <thead>
  <tr>
    <th>Table Heading</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Table Data</td>
  </tr>
  </tbody>
</table>

Table with scrollXauto

Caption
Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading
Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data
Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data

<div class="scrollXauto">
  <table class="c-table">
    <caption>Caption</caption>
    <thead>
    <tr>
      <th>Table Heading</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>Table Data</td>
    </tr>
    </tbody>
  </table>
</div>

Table responsive

Caption
Table Heading	Table Heading	Table Heading	Table Heading
Table Data	Table Data	Table Data	Table Data
Table Data	Table Data	Table Data	Table Data

<table class="c-table c-table--resp">
  <caption>Caption</caption>
  <thead>
  <tr>
    <th>Table Heading</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td data-label="Table Heading">Table Data</td>
  </tr>
  </tbody>
</table>