Tables
Basics
This is mostly just a fresh new look for tables. It wasn't originally planned, but it was added after I saw the need while making this guide.
<table class="table">
<thead>
<tr>
<th width="25%">HTML</th>
<th width="25%">CSS</th>
<th width="25%">JS</th>
<th width="25%">SCSS</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
</tr>
<!-- more data rows -->
</tbody>
</table>
| HTML | CSS | JS | SCSS |
|---|---|---|---|
| Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
| Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
| Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
| Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
Responsive Tables
Any table is able to be made responsive by adding the responsiveclass to it. This is true for our tableclass, as well. If you'd like to learn more about our other responsive table classes, see the UI Style Guide.
If your table is nested inside of a grid, and it shares its row at larger screen sizes, then you will want to use the following method. Please note, the following method only works if the
tableclass is also present on the table.
<div class="table__wrapper">
<table class="table">
<thead>
<tr>
<th width="25%">HTML</th>
<th width="25%">CSS</th>
<th width="25%">JS</th>
<th width="25%">SCSS</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
</tr>
<!-- more data rows -->
</tbody>
</table>
</div>
| HTML | CSS | JS | SCSS |
|---|---|---|---|
| Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
| Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
| Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
| Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |