Table

Basic

Applying .table class on <table> element to quick create a styled table.

ID Task Completed User
1 Lorem ipsum dolor sit amet. Yes Jan Don
2 Ipsum dolor sit amet, consectetur. Yes Leticia Lynn
3 Dolor sit amet, consectetur adipisicing elit. Corporis, veniam! Yes Steele Le
4 Consectetur adipisicing elit. Cupiditate, maxime! No Imelda Clarke
5 Dicta expedita cum in. Aspernatur quasi, enim. Yes Eugenia Orr
6 Voluptates natus, et, nisi facere at. No Ellis Brown 
<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Task</th>
      <th>Completed</th>
      <th>User</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Lorem ipsum dolor sit amet.</td>
      <td><code>Yes</code></td>
      <td>Jan Don</td>
    </tr>
    ...
  </tbody>
</table>

Striped

By adding .table--striped modifier class on <table class="table"> element to quick create a striped table.

ID Name Age Gender Company
1 Boyle Monroe 29 male QUANTALIA
2 Leticia Lynn 30 female UTARA
3 Steele Le 24 male TERSANKI
4 Imelda Clarke 32 female TALENDULA
5 Eugenia Orr 30 female OMNIGOG
6 Ellis Brown 40 male KANGLE 
<table class="table table--striped">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
      <th>Company</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Boyle Monroe</td>
      <td>29</td>
      <td>male</td>
      <td>QUANTALIA</td>
    </tr>
    ...
  </tbody>
</table>

Hover

By adding .table--hover modifier class on <table class="table"> element to quick create a table with hover effect.

ID Name Age Gender Company
1 Boyle Monroe 29 male QUANTALIA
2 Leticia Lynn 30 female UTARA
3 Steele Le 24 male TERSANKI
4 Imelda Clarke 32 female TALENDULA
5 Eugenia Orr 30 female OMNIGOG
6 Ellis Brown 40 male KANGLE 
<table class="table table--hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
      <th>Company</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Boyle Monroe</td>
      <td>29</td>
      <td>male</td>
      <td>QUANTALIA</td>
    </tr>
    ...
  </tbody>
</table>

Bordered

By adding .table--bordered modifier class on <table class="table"> element to quick create a table with border.

ID Name Age Gender Company
1 Boyle Monroe 29 male QUANTALIA
2 Leticia Lynn 30 female UTARA
3 Steele Le 24 male TERSANKI
4 Imelda Clarke 32 female TALENDULA
5 Eugenia Orr 30 female OMNIGOG
6 Ellis Brown 40 male KANGLE 
<table class="table table--bordered">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
      <th>Company</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Boyle Monroe</td>
      <td>29</td>
      <td>male</td>
      <td>QUANTALIA</td>
    </tr>
    ...
  </tbody>
</table>

Sizing

Use .table--sm or .table--lg modifier classes on .table container to change cell spacing

ID Name Age Gender Company
1 Boyle Monroe 29 male QUANTALIA
2 Leticia Lynn 30 female UTARA
3 Steele Le 24 male TERSANKI
4 Imelda Clarke 32 female TALENDULA
5 Eugenia Orr 30 female OMNIGOG
6 Ellis Brown 40 male KANGLE 
<table class="table table--bordered table--sm">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
ID Name Age Gender Company
1 Boyle Monroe 29 male QUANTALIA
2 Leticia Lynn 30 female UTARA
3 Steele Le 24 male TERSANKI
4 Imelda Clarke 32 female TALENDULA
5 Eugenia Orr 30 female OMNIGOG
6 Ellis Brown 40 male KANGLE 
<table class="table table--bordered table--lg">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Responsive

By default, table will stay it layout across all breakpoints, if you want to collapse it below a breakpoint

  • First, add the .table@<breakpoint> modifier on .table container
  • Then, add data-label="column label" on each <td> element with every <tr> table row
# Project Status Author Date
1 tortor sollicitudin mi sit amet Publish Amanda Pena 2016-09-22
2 platea dictumst maecenas ut massa Publish Juliette Mayo 2016-09-20
3 proin leo odio porttitor id consequat in Draft Juliette Mayo 2016-09-19
4 etiam justo etiam pretium Pendding Audra Moody 2016-09-15
5 nulla mollis molestie lorem quisque ut erat Publish Esmeralda Malone 2016-09-10 
<table class="table table@md">
  <thead>
    <tr>
      <th>#</th>
      <th>Project</th>
      <th>Status</th>
      <th>Author</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th data-label="#">1</th>
      <td data-label="Activity">tortor sollicitudin mi sit amet</td>
      <td data-label="Status">
        <span class="tag tag--info">Publish</span>
      </td>
      <td data-label="Author">Amanda Pena</td>
      <td data-label="Date">2016-09-22</td>
    </tr>
    <tr>
      <th data-label="#">2</th>
      <td data-label="Activity">platea dictumst maecenas ut massa</td>
      <td data-label="Status">
        <span class="tag tag--info">Publish</span>
      </td>
      <td data-label="Author">Juliette Mayo</td>
      <td data-label="Date">2016-09-20</td>
    </tr>
    ...
  </tbody>
</table>