Commentary
Classic table layout controls. These controls are opt-in by adding the .table class to the HTML tag.
This allows other libraries to control their own table layouts. Note that all modifiers are applied with the .table class.
The table HTML element is the parent container for rows and cells. Optional styling can be applied to decorate the table.
Additionally, columns can have their contents aligned centre or right. Default alignment is left. Also th and td
HTML text can have background and / or color set and can have text aligned
(see Typography).
Note that although the HTML specification for table HTML tag supports the
colgroup child HTML tag, it is very limited in what decorations it supports. In fact, it does not support
cell text alignment or individual cell content formatting.
Usage
| Classes: |
|---|
table, caption |
Key HTML tags |
.table |
Defines main container using table HTML tag |
.is-fullwidth |
Stretches table width to fit parent container |
.table-scroll |
This a container for .table that allows wide tables to overflow and be scrollable.
Note that you cannot use .is-fullwidth when using this class. |
.table-boxed |
This a container for .table that wraps a shadow box around the table.
An optional header element provides a title for the box. |
.is-striped |
Provides a background to odd rows |
.has-hover |
Sets background and text color for hover on a row |
.numbers-col-x |
x is [1-9]; Right aligns cell content (optional column styling) |
.centered-col-x |
x is [1-9]; Centre aligns cell content (optional column styling) |
.nobreak-col-x |
x is [1-9]; Prevents cell content from wrapping (optional column styling) |
.scrollbreak-col-x |
x is [1-9]; Typically a modifier for .table when using the .table-scroll
container. This allows certain columns to wrap their cell text (optional column styling) |
| Dependencies: |
|---|
| File: |
table.css |
| Variables: |
--border-main-darker, --grey-lighter, -mar-horz, -mar-vert, --pad-horz, --pad-vert, --size-5, --text-elem, --weight-semibold |
Examples
Basic Table
Caption: Table with no decoration
| # |
Item |
Value |
| 1 |
Shoes |
$95 |
| 2 |
Socks |
$15 |
| 3 |
Pants |
$105 |
| 4 |
Belt |
$35 |
|
Total |
$250 |
<table class="table">
<caption>Caption: Table with no decoration</caption>
<thead>
<tr><th>#</th><th>Item</th><th>Value</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>Shoes</td><td>$95</td></tr>
<tr><td>2</td><td>Socks</td><td>$15</td></tr>
<tr><td>3</td><td>Pants</td><td>$105</td></tr>
<tr><td>4</td><td>Belt</td><td>$35</td></tr>
</tbody>
<tfoot>
<tr><td></td><td>Total</td><td>$250</td></tr>
</tfoot>
</table>
Table Full Width and Striped
Caption: Has column with text right
| # | Item | Value | Description |
|---|
| 1 | Shoes | $95 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| 22 | Socks | $15 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| 333 | Pants | $105 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| 4444 | Belt | $35 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Total | $250 | |
<table class="table is-fullwidth is-striped centered-col-1 numbers-col-3">
<caption>Caption: Has column with text right</caption>
<thead>
<tr><th>#</th><th>Item</th><th>Value</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>Shoes</td><td>$95</td><td>Lorem ipsum ...</td></tr>
<tr><td>22</td><td>Socks</td><td>$15</td><td>Lorem ipsum ...</td></tr>
<tr><td>333</td><td>Pants</td><td>$105</td><td>Lorem ipsum ...</td></tr>
<tr><td>4444</td><td>Belt</td><td>$35</td><td>Lorem ipsum ...</td></tr>
</tbody>
<tfoot>
<tr><td></td><td>Total</td><td class="has-text-secondary">$250</td><td></td></tr>
</tfoot>
</table>
Table scroll and hover
<div class="table-scroll">
<table class="table has-hover centered-col-1 numbers-col-3 scrollbreak-col-4">
<caption>Caption: Table is scrollable and has a column with text right</caption>
<thead>
<tr>
<th>#</th>
<th>Item</th>
<th>Value</th>
<th>Description</th>
<th>Delivery</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Shoes</td>
<td>$95</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td>Available in 2 weeks</td>
</tr>
<tr class="is-danger-light">
<td>22</td>
<td>Socks</td>
<td class="has-text-right">$15</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td>Available in 1 week</td>
</tr>
<tr>
<td>333</td>
<td>Pants</td>
<td>$105</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td>Available in 3 weeks</td>
</tr>
<tr>
<td>4444</td>
<td>Belt</td>
<td>$35</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td>Available in 2 weeks</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>Total</td>
<td>$250</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</div>
Table with Box and Header
Optional Table Header & .is-secondary
| # | Item | Value | Description |
|---|
| 1 | Shoes | $95 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| 22 | Socks | $15 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| 333 | Pants | $105 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| 4444 | Belt | $35 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Total | $250 | |
<div class="table-boxed">
<header class="is-secondary">Optional Table Header & .is-secondary</header>
<table class="table is-fullwidth centered-col-1 numbers-col-3">
<thead>
<tr><th>#</th><th>Item</th><th>Value</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>Shoes</td><td>$95</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr><td>22</td><td>Socks</td><td>$15</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr><td>333</td><td>Pants</td><td>$105</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr><td>4444</td><td>Belt</td><td>$35</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
</tbody>
<tfoot>
<tr><td></td><td>Total</td><td class="has-text-secondary">$250</td><td></td></tr>
</tfoot>
</table>
</div>
