Tables

The Table component is used to present data to users.

Mobile guidance

Tables are best suited for desktop users, because of this their use should be limited for customer facing content.
On mobile tables keep their format with the exception of a horizontal scroll bar that lets user view table content that spills off of the page.

Example

Header cell	Header cell	Header cell	Header cell
Header cell	Content cell	Content cell	Content cell
Header cell	Content cell	Content cell	Content cell
Header cell	Content cell	Content cell	Content cell
Footer	Footer	Footer	Footer

HTML

<div class="table-wrapper">
  <table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">Header cell</th>
        <th scope="col">Header cell</th>
        <th scope="col">Header cell</th>
        <th scope="col">Header cell</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Header cell</th>
        <td>Content cell</td>
        <td>Content cell</td>
        <td>Content cell</td>
      </tr>
        ...
    </tbody>
    <tfoot>
      <tr>
        <td>Footer</td>
        <td>Footer</td>
        <td>Footer</td>
        <td>Footer</td>
      </tr>
    </tfoot>
  </table>
</div>