Tables

Documentation for tables and table components.

Files

app/styles/sections/_tables.scss

Tables

Basic table can be created by using class .table on standard HTML table.

Example:
No. Lorem Ipsum Dolor
1 Et fugiat Voluptate dolore 979
2 Quis deserunt Aliqua sint laboris ut 814
3 Voluptate dolore Aliqua sint laboris ut 436
Code:
<table class="table">
  ...
</table>

Bordered

To create bordered version of table simple ad additional class .table--bordered.

Example:
No. Lorem Ipsum Dolor
1 Et fugiat Voluptate dolore 979
2 Quis deserunt Aliqua sint laboris ut 814
3 Voluptate dolore Aliqua sint laboris ut 436
Code:
<table class="table table--bordered">
  ...
</table>

Striped

To create striped version of table simple ad additional class .table--striped.

Example:
No. Lorem Ipsum Dolor
1 Et fugiat Voluptate dolore 979
2 Quis deserunt Aliqua sint laboris ut 814
3 Voluptate dolore Aliqua sint laboris ut 436
Code:
<table class="table table--striped">
  ...
</table>

Clean

To create clean no bordered version of table simple ad additional class .table--clean.

Example:
1 Et fugiat Voluptate dolore 979
2 Quis deserunt Aliqua sint laboris ut 814
3 Voluptate dolore Aliqua sint laboris ut 436
Code:
<table class="table table--clean">
  ...
</table>

Table heading

To create table heading, just apply class .table__heading to the first row tr of thead.

Example:
Nutrition
No. Lorem Ipsum Dolor
1 Et fugiat Voluptate dolore 979
2 Quis deserunt Aliqua sint laboris ut 814
3 Voluptate dolore Aliqua sint laboris ut 436
Code:
<table class="table table--striped">
  <thead>
    <tr class="table__heading">
      <th colspan="3">Nutrition</th>
      <th>
        //buttons
      </th>
    </tr>
    <tr>
      ...
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>