Tables
Table Examples
HTML tables can be styled using a few simple classes. In addition, the col-padding-* classes can be used to add padding for all table cells.
| 2017 | Total | v60 | v59 | v59 |
|---|---|---|---|---|
| Apr | 75.7 | 0.1 | 0.2 | 4.9 |
| Mar | 75.1 | 0.2 | 0.4 | |
| Feb | 74.1 | 0.2 | ||
| Jan | 73.7 | 0.1 | ||
| Footer | ||||
<table class="table table-bordered table-dark
table-hover width-full col-padding-md text-sm">
<thead>
<tr>
<th>
2017
</th>
<th>
Total
</th>
<th>
v60
</th>
<th>
v59
</th>
<th>
v59
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Apr
</td>
<td>
75.7
</td>
<td>
0.1
</td>
<td>
0.2
</td>
<td>
4.9
</td>
</tr>
<tr>
<td>
Mar
</td>
<td>
75.1
</td>
<td>
</td>
<td>
0.2
</td>
<td>
0.4
</td>
</tr>
<tr>
<td>
Feb
</td>
<td>
74.1
</td>
<td>
</td>
<td>
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
Jan
</td>
<td>
73.7
</td>
<td>
</td>
<td>
</td>
<td>
0.1
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
Footer
</td>
</tr>
</tfoot>
</table>
HTML
| 2017 | Total | v60 | v59 | v59 |
|---|---|---|---|---|
| Apr | 75.7 | 0.1 | 0.2 | 4.9 |
| Mar | 75.1 | 0.2 | 0.4 | |
| Feb | 74.1 | 0.2 | ||
| Jan | 73.7 | 0.1 | ||
| Footer | ||||
<table class="table table-bordered table-accent-1
table-striped table-hover width-full col-padding-md text-sm">
<thead>
<tr>
<th>
2017
</th>
<th>
Total
</th>
<th>
v60
</th>
<th>
v59
</th>
<th>
v59
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Apr
</td>
<td>
75.7
</td>
<td>
0.1
</td>
<td>
0.2
</td>
<td>
4.9
</td>
</tr>
<tr>
<td>
Mar
</td>
<td>
75.1
</td>
<td>
</td>
<td>
0.2
</td>
<td>
0.4
</td>
</tr>
<tr>
<td>
Feb
</td>
<td>
74.1
</td>
<td>
</td>
<td>
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
Jan
</td>
<td>
73.7
</td>
<td>
</td>
<td>
</td>
<td>
0.1
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
Footer
</td>
</tr>
</tfoot>
</table>
HTML
Table Classes
HTML tables are supported with a set of high-level classes to set up the layout, style and basic theme colors. These classes are described below.
| Class | Description |
|---|---|
| table | Defines table layout of fixed with a width of 100% and collapsed border. |
| table-auto | Similar to the table class, but using a table layout of auto. |
| table-layout-auto | Used to set a table layout to auto. |
| table-layout-fixed | Used to set a table layout to fixed. |
| table-bordered | Adds a themed border to all table data (td) cells, or a default border if no theme is defined. |
| table-head-bordered | Adds a themed border to all table header (th) cells, or a default border if no theme is defined. |
| table-striped | Adds a themed background color to alternate table rows (tr). |
| table-hover | Adds a themed hover color to table rows (tr). |
| table-responsive | When added to the table element, the table will stack at the breakpoint specified in the settings. |
| table-default | Styles a table based on the default theme color. |
| table-light | Styles a table based on the light theme color. |
| table-light-alternate | Styles a table based on the light-alternate theme color. |
| table-dark | Styles a table based on the dark theme color. |
| table-dark-alternate | Styles a table based on the dark-alternate theme color. |
| table-accent-1 | Styles a table based on on the accent-1 theme color. |
| table-accent-2 | Styles a table based on the accent-2 theme color. |
| table-accent-3 | Styles a table based on the accent-3 theme color. |
| table-accent-4 | Styles a table based on the accent-4 theme color. |
| table-accent-5 | Styles a table based on the accent-5 theme color. |
Responsive Tables
Responsive Table Example
In the following example, the table-responsive class is used. Each table data cell must have a data-th attribute defined if a heading is required for each row when the table is stacked and in small screen mode.
| # | First name | Last name | |
|---|---|---|---|
| 1 | John | Doe | johndoe@hotmail.com |
| 2 | Aisha | Craig | aishacraig@gmail.com |
| 3 | Nicolas | Hughes | nickhughes@gmail.com |
| 4 | Nyasia | Santiago | nsantiago@hotmail.com |
| Footer | |||
<table class="table table-dark table-bordered
table-striped table-hover table-responsive width-full col-padding-sm text-sm">
<thead class="text-left color-warning-light">
<tr>
<th class="width-sm">
#
</th>
<th>
First name
</th>
<th>
Last name
</th>
<th class="width-one-half">
Email
</th>
</tr>
</thead>
<tbody class="color-default">
<tr>
<td data-th="#">
1
</td>
<td data-th="First name">
John
</td>
<td data-th="Last name">
Doe
</td>
<td data-th="Email">
johndoe@hotmail.com
</td>
</tr>
<tr>
<td data-th="#">
2
</td>
<td data-th="First name">
Aisha
</td>
<td data-th="Last name">
Craig
</td>
<td data-th="Email">
aishacraig@gmail.com
</td>
</tr>
<tr>
<td data-th="#">
3
</td>
<td data-th="First name">
Nicolas
</td>
<td data-th="Last name">
Hughes
</td>
<td data-th="Email">
nickhughes@gmail.com
</td>
</tr>
<tr>
<td data-th="#">
4
</td>
<td data-th="First name">
Nyasia
</td>
<td data-th="Last name">
Santiago
</td>
<td data-th="Email">
nsantiago@hotmail.com
</td>
</tr>
</tbody>
<tfoot class="color-default text-sm">
<tr>
<td colspan="4">
Footer
</td>
</tr>
</tfoot>
</table>
HTML