Tables
There's some basic styling applied to table tags and children to make it more
browser-friendly, but there's also several classes to help define some basic
UX-ready tables. Many of these classes can be combined or nested as needed.
Default table
| Table Header 1 |
Table Header 2 |
Table Header 3 |
| Table Footer 1 |
Table Footer 2 |
Table Footer 3 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
<table>
<thead>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Table Footer 1</td>
<td>Table Footer 2</td>
<td>Table Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
</tbody>
</table>
Unstyled table
| Table Header 1 |
Table Header 2 |
Table Header 3 |
| Table Footer 1 |
Table Footer 2 |
Table Footer 3 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
<table class='table-unstyled'>
<thead>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Table Footer 1</td>
<td>Table Footer 2</td>
<td>Table Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
</tbody>
</table>
Zero padding
| Table Header 1 |
Table Header 2 |
Table Header 3 |
| Table Footer 1 |
Table Footer 2 |
Table Footer 3 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
<table class="table-nopad">
<thead>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Table Footer 1</td>
<td>Table Footer 2</td>
<td>Table Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
</tbody>
</table>
XS padding
| Table Header 1 |
Table Header 2 |
Table Header 3 |
| Table Footer 1 |
Table Footer 2 |
Table Footer 3 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
<table class="table-xs">
<thead>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Table Footer 1</td>
<td>Table Footer 2</td>
<td>Table Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
</tbody>
</table>
SM padding
| Table Header 1 |
Table Header 2 |
Table Header 3 |
| Table Footer 1 |
Table Footer 2 |
Table Footer 3 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
<table class="table-sm">
<thead>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Table Footer 1</td>
<td>Table Footer 2</td>
<td>Table Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
</tbody>
</table>
lg padding
| Table Header 1 |
Table Header 2 |
Table Header 3 |
| Table Footer 1 |
Table Footer 2 |
Table Footer 3 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
<table class="table-lg">
<thead>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Table Footer 1</td>
<td>Table Footer 2</td>
<td>Table Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
</tbody>
</table>
Bordered table
| Table Header 1 |
Table Header 2 |
Table Header 3 |
| Table Footer 1 |
Table Footer 2 |
Table Footer 3 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
<table class="table-bordered">
<thead>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Table Footer 1</td>
<td>Table Footer 2</td>
<td>Table Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
</tbody>
</table>
Striped table
| Table Header 1 |
Table Header 2 |
Table Header 3 |
| Table Footer 1 |
Table Footer 2 |
Table Footer 3 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
<table class="table-striped">
<thead>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Table Footer 1</td>
<td>Table Footer 2</td>
<td>Table Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
</tbody>
</table>
Striped columns
| Table Header 1 |
Table Header 2 |
Table Header 3 |
| Table Footer 1 |
Table Footer 2 |
Table Footer 3 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
<table class="table-striped-column">
<col>
<col>
<col>
<thead>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Table Footer 1</td>
<td>Table Footer 2</td>
<td>Table Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
</tbody>
</table>
Striped both
| Table Header 1 |
Table Header 2 |
Table Header 3 |
| Table Footer 1 |
Table Footer 2 |
Table Footer 3 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
<table class="table-striped-column table-striped table-hover">
<col>
<col>
<col>
<thead>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Table Footer 1</td>
<td>Table Footer 2</td>
<td>Table Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
</tbody>
</table>
Hoverable table rows
| Table Header 1 |
Table Header 2 |
Table Header 3 |
| Table Footer 1 |
Table Footer 2 |
Table Footer 3 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
<table class="table-hover">
<thead>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Table Footer 1</td>
<td>Table Footer 2</td>
<td>Table Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
</tbody>
</table>
Striped and hoverable for dark backgrounds
ProTip: use the "full-width" utility class to force a table to extend the width of its container.
| Table Header 1 |
Table Header 2 |
Table Header 3 |
| Table Footer 1 |
Table Footer 2 |
Table Footer 3 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
| Table Header 1 |
Table Header 2 |
Table Header 3 |
| Table Footer 1 |
Table Footer 2 |
Table Footer 3 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
| Table Body 1 |
Table Body 1 |
Table Body 1 |
<div class="p1 skin-gray-dark">
<p> ProTip: use the "full-width" utility class to force a table to extend the width of its container.
<table class="table-striped-dark full-width">
<thead>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Table Footer 1</td>
<td>Table Footer 2</td>
<td>Table Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
</tbody>
</table>
<hr/>
<table class="table-hover-dark">
<thead>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Table Footer 1</td>
<td>Table Footer 2</td>
<td>Table Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
<tr>
<td>Table Body 1</td>
<td>Table Body 1</td>
<td>Table Body 1</td>
</tr>
</tbody>
</table>
</div>
Customizing tables
Overwrite these variables in _custom_variables.scss to change these defaults.
$table-cell-pad: 1rem 1rem !default;
$table-cell-condensed-pad: 0.5rem 0.5rem !default;
$table-bg: transparent !default;
$table-header-border: rgba(0, 0, 0, 0.1) !default;
$table-footer-border: rgba(0, 0, 0, 0.1) !default;
$table-header-bg: transparent !default;
$table-footer-bg: transparent !default;
$table-cell-border: rgba(0, 0, 0, 0.1) !default;
$table-stripe-color: #F0F0F0 !default;
$table-hover-color: #E7E7E7 !default;
$table-border-color: rgba(0, 0, 0, 0.1) !default;
$table-vertical-align: middle !default;
$table-stripe-dark-color: rgba(255, 255, 255, 0.1) !default;
$table-hover-dark-color: rgba(255, 255, 255, 0.2) !default;