Tables

Tables display tabular data in columns and rows.

First Header	Second Header	Third Header	Fourth Header	Fifth Header
This	Is	A	Normal	Table
This	Is	A	Normal	Table
This	Is	A	Normal	Table
This	Is	A	Normal	Table
This	Is	A	Normal	Table
This	Is	A	Normal	Table
This	Is	A	Normal	Table

Usage

<table>
  <thead>
    <tr>
      <th>First Header</th>
      <th>Second Header</th>
      <th>Third Header</th>
      <th>Fourth Header</th>
      <th>Fifth Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>This</td>
      <td>Is</td>
      <td>A</td>
      <td>Normal</td>
      <td>Table</td>
    </tr>
  …
  </tbody>
</table>

Borderless Table (.borderless)

This table is styled using the .borderless class.

First Header	Second Header	Third Header	Fourth Header	Fifth Header
This	Is	A	Borderless	Table
This	Is	A	Borderless	Table
This	Is	A	Borderless	Table
This	Is	A	Borderless	Table
This	Is	A	Borderless	Table
This	Is	A	Borderless	Table
This	Is	A	Borderless	Table

Usage

<table class="borderless">
  <thead>
    <tr>
      <th>First Header</th>
      <th>Second Header</th>
      <th>Third Header</th>
      <th>Fourth Header</th>
      <th>Fifth Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>This</td>
      <td>Is</td>
      <td>A</td>
      <td>Borderless</td>
      <td>Table</td>
    </tr>
  …
  </tbody>
</table>

Responsive Table (.horizontal-scrolling)

This table has been made responsive by adding the .horizontal-scrolling class to a div wrapper element.

First Header	Second Header	Third Header	Fourth Header	Fifth Header
This	Is	A	Responsive	Table
This	Is	A	Responsive	Table
This	Is	A	Responsive	Table
This	Is	A	Responsive	Table
This	Is	A	Responsive	Table

Usage

<div class="horizontal-scrolling">
  <table>
    <thead>
      <tr>
        <th>First Header</th>
        <th>Second Header</th>
        <th>Third Header</th>
        <th>Fourth Header</th>
        <th>Fifth Header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>tdis</td>
        <td>Is</td>
        <td>A</td>
        <td>Responsive</td>
        <td>Table</td>
      </tr>
    …
    </tbody>
  </table>
</div>