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. The 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 the parent container |
.table-scroll |
This is 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 is 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-border |
Adds border around the full table |
.has-hover |
Sets background and text color for hover on a row |
.has-text-small |
Reduces table and caption text by one size |
.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: |
--bg-container, --border-main, --border-main-darker, --grey-lighter, --mar-horz, --mar-vert,
--padding, --pad-horz, --pad-horz-small, --pad-vert, --pad-vert-small,
--radius-comp, --shadow-container, --size-5, --size-6, --size-7, --text, --text-elem, --weight-semibold
|
| Layer: |
elements |
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, Striped & Small Text
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 has-text-small 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, Border & Hover
<div class="table-scroll">
<table class="table has-hover has-border 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-dark">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>
