This version is deprecated. See the latest version.
Tables
Use a standard table markup with thead and tbody sections to get the correct styling.
Add the wrap class for responsive tables. It will be wrap the table in a container with a horizontal scroll added when the device isn’t wide enough as seen in this live example.
| 2012 | 2013 | 2014 | 2015 | 2016 |
|---|---|---|---|---|
| Lorem ipsum dolor | Lorem ipsum dolor sit amet, consectetur adipisicing elit | Consectetur adipisicing elit | Lorem ipsum dol. | Sed do eiusmod tempor incididunt ut. |
| Consectetur adipisicing elit | Excepteur sint occaecat. | Incididunt ut labore et dolore magna aliqua. | Lorem ipsum dolor sit amet, consectetur adipisicing elit | Excepteur sint occaecat. |
| Lorem ipsum dolor | Sed do eiusmod. | Lorem ipsum dolor sit amet, consectetur adipisicing elit | Consectetur adipisicing elit | Lorem ipsum dol. |
| Lorem ipsum dolor | Lorem ipsum dolor sit amet, consectetur adipisicing elit | Excepteur sint occaecat. | Sed do eiusmod tempor incididunt ut. | Duis aute irur. |
| Incididunt ut labore et dolore magna aliqua. | Duis aute irur. | Consectetur adipisicing elit | Excepteur sint occaecat. | Lorem ipsum dolor sit amet, consectetur adipisicing elit |
| Lorem ipsum dolor | Excepteur sint occaecat. | Sed do eiusmod. | Duis aute irur. | Psum dol. |
<table class="wrap full">
<thead>
<tr>
<th>2012</th>
<th>2013</th>
<th>2014</th>
<th>2015</th>
<th>2016</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>Consectetur adipisicing elit</td>
<td>Lorem ipsum dol.</td>
<td>Sed do eiusmod tempor incididunt ut.</td>
</tr>
...
</tbody>
</table>Full Width
Add the class full to the table element to get a full width table.