Tables

Use a standard table markup with thead and tbody sections to get the correct styling.

Add a wrap class for responsive tables. It will wrap the table in a container with a horizontal scroll when the device isn’t wide enough as seen in this live example.

The full class give you a full width table.

2013 2014 2015 2016
Net 56% 14% 98% 11%
Gross 55% 48% 97% 3%
Comment Sed do eiusmod. Sit amet, consectetur Consectetur adipisicing elit Lorem ipsum dol.
Fox Sit amet Excepteur sint occaecat. Sed do eiusmod tempor incididunt ut. Duis aute irur.
Barx Duis aute irur. Consectetur Excepteur sint occaecat. Adipisicing elit
Box Excepteur sint occaecat. Sed do eiusmod. Duis aute irur. Psum dol.
<table class="wrap full">
<thead>
<tr>
<th></th>
<th>2013</th>
<th>2014</th>
<th>2015</th>
<th>2016</th>
</tr>
</thead>
<tbody>
<tr>
<th>Net</th>
<td>56%</td>
<td>14%</td>
<td>98%</td>
<td>11%</td>
</tr>
<tr>
<th>Gross</th>
<td>55%</td>
<td>48%</td>
<td>97%</td>
<td>3%</td>
</tr>
...
</tbody>
</table>