Skip to main content

Patterns: Tables

Based on Bootstrap v4. SCSS.

Standard

With .table class:

This is a caption
Column 1 Col 2
Bob 23
Terry 9999
Total 10022 
<table class="table">
  <caption>This is a caption</caption>
  <thead>
    <tr>
      <th>Column 1</th>
      <th class="utils-align-right">Col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bob</td>
      <td class="utils-align-right">23</td>
    </tr>
    <tr>
      <td>Terry</td>
      <td class="utils-align-right">9999</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td class="utils-align-right">10022</td>
    </tr>
  </tfoot>
</table>

Small table

With additional .table--sm:

This is a caption
Column 1 Col 2
Bob 23
Terry 9999 
<table class="table table--sm">
  <caption>This is a caption</caption>
  <thead>
    <tr>
      <th>Column 1</th>
      <th class="utils-align-right">Col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bob</td>
      <td class="utils-align-right">23</td>
    </tr>
    <tr>
      <td>Terry</td>
      <td class="utils-align-right">9999</td>
    </tr>
  </tbody>
</table>

Full-width table

With additional .table--full:

This is a caption
Column 1 Col 2
Bob 23
Terry 9999 
<table class="table table--full">
  <caption>This is a caption</caption>
  <thead>
    <tr>
      <th>Column 1</th>
      <th class="utils-align-right">Col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bob</td>
      <td class="utils-align-right">23</td>
    </tr>
    <tr>
      <td>Terry</td>
      <td class="utils-align-right">9999</td>
    </tr>
  </tbody>
</table>

Responsive table

With additional .table--responsive. If it's going to be wider than the container, this will allow it to scroll left/right.

This is a caption
Column 1 Column 2 Column 3 Column 4 Column 5 Column 6 Column 7 Column 8
Bob 23 Bob 23 Bob 23 Bob 23
Terry 9999 Terry 9999 Terry 9999 Terry 9999 
<table class="table table--sm table--responsive">
  <caption>This is a caption</caption>
  <thead>
    <tr>
      <th>Column 1</th>
      <th class="utils-align-right">Column 2</th>
      <th>Column 3</th>
      <th class="utils-align-right">Column 4</th>
      <th>Column 5</th>
      <th class="utils-align-right">Column 6</th>
      <th>Column 7</th>
      <th class="utils-align-right">Column 8</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bob</td>
      <td class="utils-align-right">23</td>
      <td>Bob</td>
      <td class="utils-align-right">23</td>
      <td>Bob</td>
      <td class="utils-align-right">23</td>
      <td>Bob</td>
      <td class="utils-align-right">23</td>
    </tr>
    <tr>
      <td>Terry</td>
      <td class="utils-align-right">9999</td>
      <td>Terry</td>
      <td class="utils-align-right">9999</td>
      <td>Terry</td>
      <td class="utils-align-right">9999</td>
      <td>Terry</td>
      <td class="utils-align-right">9999</td>
    </tr>
  </tbody>
</table>