Basic table
Structure
| HTML element |
Class |
Behavior |
| table |
.table |
Changes visual apperence. |
| tr |
.table-row |
Required for its modifiers. |
<table class="table">
<thead>
<tr class="table-row">
<th>HTML element</th>
<th>Class</th>
<th>Behavior</th>
</tr>
</thead>
<tbody>
<tr class="table-row">
<td>table</td>
<td>.table</td>
<td>Changes visual apperence.</td>
</tr>
</tbody>
</table>
Modifiers
| Modifier (.table) |
Behavior |
| .table--borderLess |
Removes border. |
| .table--condensed |
Reduces size of padding inside table, sets smaller font size. |
| .table--borderLess.table--condensed |
On top of individual behaviors it adds padding bottom for <thead> and padding top for <tfoot>. |
Responsive wrapper
Responsive wrapper is useful when you aren't splitting desktop and mobile styles. Table in responsive wrapper on small viewports will be scrollable on horizontal axis.
<div class="responsiveTableWrapper">
<table class="table">...</table>
</div>
Table row (.table-row)
Modifiers
| Modifier (.table-row) |
Behavior |
| .table-row--clickable |
Adds hover effect. |
Table cell
Sometimes it's neccessery to set max width of table cell, this can be acomplished with utilities (u-maxWidth).