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>