Responsive Tables

These CSS classes allow for <table>s to appear as a card style layout for smaller screens.

.responsive
for mobile (max-width: 767px)
.responsive-sm
for tablet (min-width: 768px and max-width: 991px)
.responsive-md
for small desktop (min-width: 992px and max-width: 1199px)

All responsive tables must have the .table class

The table headers must be repeated using the data-header attribute on each table cell

We specifically did not create a .responsive-lg class because at that point, we should be using <dl class="dl-horizontal dt-as-left-aligned"> instead

Table Header 1 Table Header 2 Table Header 3
Table Body 1 Table Body 2 Table Body 3
Table Body 1 Table Body 2 Table Body 3
Table Body 1 Table Body 2 Table Body 3 
<table class="table responsive responsive-sm responsive-md">
  <thead>
    <tr>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-header="Table Header 1">Table Body 1</td>
      <td data-header="Table Header 2">Table Body 2</td>
      <td data-header="Table Header 3">Table Body 3</td>
    </tr>
    <tr>
      <td data-header="Table Header 1">Table Body 1</td>
      <td data-header="Table Header 2">Table Body 2</td>
      <td data-header="Table Header 3">Table Body 3</td>
    </tr>
    <tr>
      <td data-header="Table Header 1">Table Body 1</td>
      <td data-header="Table Header 2">Table Body 2</td>
      <td data-header="Table Header 3">Table Body 3</td>
    </tr>
  </tbody>
</table>