Tables
Apply various visual styles to tabular content, with various border, color, and responsive layout options.
Contents
- Overview
- Basic Table
- Styled Tables
- Table Borders
- Cell Alignment
- Captions
- Scrolling Tables
- Color Variants
- SASS Reference
Overview
Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be opt-in. Just add the base class .table
to any <table>
, then extend with custom styles or our various included modifier classes.
Basic Table
Using the most basic table markup, a .table
will result in a mostly unstyled table, and will use all available width.
Nested tables are not explicitly supported by Figuration as they can create usability and accessibility issues for screen reader users. The recommendation would be to break up complex tables into multiple simpler tables. Check out MDN’s HTML table advanced features and accessibility document for additional help when building tables.
# | Header 1 | Header 2 | Header 3 |
---|---|---|---|
1 | Cell | Cell | Cell |
2 | Spanned Cell | Cell | |
3 | Cell | Cell | Cell |
Footer 1 | Footer 2 | Footer 3 |
Styled Tables
Striped Rows
Use .table-striped{-alt}
to add zebra-striping to any table row within the <tbody>
. This is done by using a semi-opaque, inset box-shadow
within each cell to adjust the perceived background color.
Variants include:
.table-striped
- darken the striped row’s background-color.table-striped-alt
- lighten the striped row’s background-color
# | Header 1 | Header 2 | Header 3 |
---|---|---|---|
1 | Cell | Cell | Cell |
2 | Spanned Cell | Cell | |
3 | Cell | Cell | Cell |
Footer 1 | Footer 2 | Footer 3 |
# | Header 1 | Header 2 | Header 3 |
---|---|---|---|
1 | Cell | Cell | Cell |
2 | Spanned Cell | Cell | |
3 | Cell | Cell | Cell |
Footer 1 | Footer 2 | Footer 3 |
Hoverable Rows
Add .table-hover{-alt}
to enable a hover state on table rows within a <tbody>
. This is done by using a semi-opaque, inset box-shadow
within each cell to adjust the perceived background color.
Variants include:
.table-hover
- darken the hovered row’s background-color.table-hover-alt
- lighten the hovered row’s background-color
# | Header 1 | Header 2 | Header 3 |
---|---|---|---|
1 | Cell | Cell | Cell |
2 | Spanned Cell | Cell | |
3 | Cell | Cell | Cell |
Footer 1 | Footer 2 | Footer 3 |
# | Header 1 | Header 2 | Header 3 |
---|---|---|---|
1 | Cell | Cell | Cell |
2 | Spanned Cell | Cell | |
3 | Cell | Cell | Cell |
Footer 1 | Footer 2 | Footer 3 |
Condensed Table
Add .table-condensed
to make tables more compact by reducing the cell padding.
# | Header 1 | Header 2 | Header 3 |
---|---|---|---|
1 | Cell | Cell | Cell |
2 | Spanned Cell | Cell | |
3 | Cell | Cell | Cell |
Footer 1 | Footer 2 | Footer 3 |
Narrow Table
Use our sizing utilities, such as w-auto
, to control a table’s width.
# | Header 1 | Header 2 | Header 3 |
---|---|---|---|
1 | Cell | Cell | Cell |
2 | Spanned Cell | Cell | |
3 | Cell | Cell | Cell |
Footer 1 | Footer 2 | Footer 3 |
Table Borders
Divided Table
Add a horizontal border between rows using .table-divided
.
# | Header 1 | Header 2 | Header 3 |
---|---|---|---|
1 | Cell | Cell | Cell |
2 | Spanned Cell | Cell | |
3 | Cell | Cell | Cell |
Footer 1 | Footer 2 | Footer 3 |
Ruled Table
Put a border on the top and bottom of a table, and between rows using .table-ruled
.
# | Header 1 | Header 2 | Header 3 |
---|---|---|---|
1 | Cell | Cell | Cell |
2 | Spanned Cell | Cell | |
3 | Cell | Cell | Cell |
Footer 1 | Footer 2 | Footer 3 |
Pillared Table
Put a vertical border and between columns using .table-pillared
.
# | Header 1 | Header 2 | Header 3 |
---|---|---|---|
1 | Cell | Cell | Cell |
2 | Spanned Cell | Cell | |
3 | Cell | Cell | Cell |
Footer 1 | Footer 2 | Footer 3 |
Walled Table
Put a border on the sides of a table, and between columns using .table-walled
.
# | Header 1 | Header 2 | Header 3 |
---|---|---|---|
1 | Cell | Cell | Cell |
2 | Spanned Cell | Cell | |
3 | Cell | Cell | Cell |
Footer 1 | Footer 2 | Footer 3 |
Celled Table
Put horizontal and vertical borders between rows and columns using .table-celled
.
# | Header 1 | Header 2 | Header 3 |
---|---|---|---|
1 | Cell | Cell | Cell |
2 | Spanned Cell | Cell | |
3 | Cell | Cell | Cell |
Footer 1 | Footer 2 | Footer 3 |
Wrapped Table
Put a border all around the outisde of a table with .table-wrapped
.
# | Header 1 | Header 2 | Header 3 |
---|---|---|---|
1 | Cell | Cell | Cell |
2 | Spanned Cell | Cell | |
3 | Cell | Cell | Cell |
Footer 1 | Footer 2 | Footer 3 |
Bordered Table
Put a border around the table and every cell with .table-bordered
.
# | Header 1 | Header 2 | Header 3 |
---|---|---|---|
1 | Cell | Cell | Cell |
2 | Spanned Cell | Cell | |
3 | Cell | Cell | Cell |
Footer 1 | Footer 2 | Footer 3 |
Cell Alignment
By default, table cells of <thead>
are vertically aligned to the bottom
. Table cells in <tbody>
inherit their alignment from <table>
and are aligned to the the top
by default.
Header 1 | Header 2 | Header 3 | Header 4 |
---|---|---|---|
This cell inherits vertical-align: top; from the table |
This cell inherits vertical-align: top; from the table |
This cell inherits vertical-align: top; from the table |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae ipsum ut metus elementum ultricies sit amet et velit. In pharetra magna at euismod fringilla. |
This cell inherits vertical-align: bottom; from the table row |
This cell inherits vertical-align: bottom; from the table row |
This cell inherits vertical-align: bottom; from the table row |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae ipsum ut metus elementum ultricies sit amet et velit. In pharetra magna at euismod fringilla. |
This cell inherits vertical-align: top; from the table |
This cell inherits vertical-align: top; from the table |
This cell is aligned to the middle. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae ipsum ut metus elementum ultricies sit amet et velit. In pharetra magna at euismod fringilla. |
Captions
A <caption>
functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
# | First Name | Last Name | Username |
---|---|---|---|
1 | John | Doe | jdoe |
2 | Jane | Smith | jsmith |
3 | James | White | jwhite |
Scrolling Tables
Having an issue with tables becoming too wide for their containers? Add a .table-scroll
wrapper to any .table
to make them scroll horizontally if they become wider than their container.
Vertical Clipping
Scrolling tables make use of overflow-y: hidden
, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
Always Scrolling
# | Header 1 | Header 2 | Header 3 | Header 4 | Header 5 | Header 6 | Header 7 | Header 8 | Header 9 |
---|---|---|---|---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
Footer 1 | Footer 2 | Footer 3 | Footer 4 | Footer 5 | Footer 6 | Footer 7 | Footer 8 | Footer 9 |
Responsive Scrolling
Table scrolling is also available in responsive variants of the form .table-scroll-*
, where the table will horizontally scroll when the table is wider than it’s container and when the viewport is at the given breakpoint or smaller.
Responsive variants are:
.table-scroll-xs
.table-scroll-sm
.table-scroll-md
.table-scroll-lg
Heads up! There is no .table-scroll-*
class created for the largest breakpoint, .table-scroll-xl
, since it is functionally equivalent to using .table-scroll
.
# | Header 1 | Header 2 | Header 3 | Header 4 | Header 5 | Header 6 |
---|---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell | Cell |
Footer 1 | Footer 2 | Footer 3 | Footer 4 | Footer 5 | Footer 6 |
# | Header 1 | Header 2 | Header 3 | Header 4 | Header 5 | Header 6 |
---|---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell | Cell |
Footer 1 | Footer 2 | Footer 3 | Footer 4 | Footer 5 | Footer 6 |
# | Header 1 | Header 2 | Header 3 | Header 4 | Header 5 | Header 6 |
---|---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell | Cell |
Footer 1 | Footer 2 | Footer 3 | Footer 4 | Footer 5 | Footer 6 |
# | Header 1 | Header 2 | Header 3 | Header 4 | Header 5 | Header 6 |
---|---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell | Cell |
Footer 1 | Footer 2 | Footer 3 | Footer 4 | Footer 5 | Footer 6 |
Color Variants
Use color utility classes to style tables with color.
Conveying Meaning to Assistive Technologies
Please refer to the Accessiblity notes about conveying meaning with color.
Inverse Table
Easily create an inverted table with light text on a dark background.
# | Header 1 | Header 2 | Header 3 |
---|---|---|---|
1 | Cell | Cell | Cell |
2 | Spanned Cell | Cell | |
3 | Cell | Cell | Cell |
Footer 1 | Footer 2 | Footer 3 |
Header/Footer Color
Use text or background utilities to alter the look of the header and/or footer.
# | Header 1 | Header 2 | Header 3 |
---|---|---|---|
1 | Cell | Cell | Cell |
2 | Spanned Cell | Cell | |
3 | Cell | Cell | Cell |
Footer 1 | Footer 2 | Footer 3 |
Border Color
.table
s are defined with border-{side}-color: inherit;
, allowing for easy recoloring of the borders by setting the border-color
on the .table
itself. Setting a border-color
on a table row or cell will affect the border color for that specific element and it’s descendants.
All cells use border-top
for their horizontal borders, while <thead>
adds a border-bottom
to <th>
elements.
All cells use border-left
for their vertical ones, unless they are the last ones in a row, then they potentially add a border-right
depending on the modifier used.
<div class=”cf-example”
# | Header 1 | Header 2 | Header 3 |
---|---|---|---|
1 | Cell | Cell | Cell |
2 | Spanned Cell | Cell | |
3 | Cell | Cell | Cell |
Footer 1 | Footer 2 | Footer 3 |
</div>
# | Header 1 | Header 2 | Header 3 |
---|---|---|---|
1 | Cell | Cell | Cell |
2 | Spanned Cell | Cell | |
3 | Cell | Cell | Cell |
Footer 1 | Footer 2 | Footer 3 |
Contextual Classes
Use contextual classes to color table rows or individual cells.
Default | Cell | Cell |
---|---|---|
Active | Cell | Cell |
Primary | Cell | Cell |
Secondary | Cell | Cell |
Success | Cell | Cell |
Info | Cell | Cell |
Warning | Cell | Cell |
Danger | Cell | Cell |
Light | Cell | Cell |
Dark | Cell | Cell |
You may also use text or background utilities.
# | Column heading | Column heading | Column heading |
---|---|---|---|
1 | Column content | Column content | Column content |
2 | Column content | Column content | Column content |
3 | Column content | Column content | Column content |
4 | Column content | Column content | Column content |
5 | Column content | Column content | Column content |
6 | Column content | Column content | Column content |
7 | Column content | Column content | Column content |
8 | Column content | Column content | Column content |
9 | Column content | Column content | Column content |
Column footer | Column footer | Column footer |
You can also use text or background utilities to achieve multiple styles.
# | Header 1 | Header 2 | Header 3 |
---|---|---|---|
1 | Cell | Cell | Cell |
2 | table cell | table cell | |
3 | table cell | Cell | table cell |
Footer 1 | Footer 2 | Footer 3 |
SASS Reference
Variables
The available Customization options, or Sass variables, that can be customized for tables.
Name | Type | Default | Description |
---|---|---|---|
$enable-table |
boolean | true |
Enable the generation of the table classes.
Smaller segements of the table classes can be disabled with the following $enable-* variables.
|
$enable-table-borders |
boolean | true |
Enable the generation of table border classes. |
$enable-table-striped |
boolean | true |
Enable the generation of striped table classes. |
$enable-table-hover |
boolean | true |
Enable the generation of hoverable table classes. |
$enable-table-condensed |
boolean | true |
Enable the generation of condensed table classes. |
$enable-table-active |
boolean | true |
Enable the generation of active table row color class. |
$enable-table-colors |
boolean | true |
Enable the generation of theme table row color classes. |
$enable-table-scroll |
boolean | true |
Enable the generation of scrollable table class. |
$enable-table-scroll-responsive |
boolean | true |
Enable the generation of responsive scrollable table classes. |
$table-margin-bottom |
string | $spacer |
Margin bottom for table. |
$table-cell-padding |
boolean | .5rem |
Table cell padding. |
$table-condensed-cell-padding |
boolean | .25rem |
Cell padding for condensed table variant. |
$table-caption-color |
boolean | $uibase-500 |
Table caption text color. |
$table-cell-vertical-align |
string | top |
Vertical alignment for table cells. |
$table-head-vertical-align |
string | bottom |
Vertical alignment for header cells. |
$table-cell-vertical-align |
string | left |
Horizontal alignment for header cells. |
$table-bg |
boolean | null |
Table background color. |
$table-bg-active |
boolean | $component-hover-bg |
Active table row background color. |
$table-bg-active-hover |
boolean | $uibase-200 |
Active table row background color for hover state. |
$table-border-width |
boolean | $border-width |
Table cell border width. |
$table-border-color |
boolean | $component-border-color |
Table cell border color. |
$table-head-border-width |
boolean | 2 * $table-border-width |
Border width between table header and body. |
$table-body-border-width |
boolean | 2 * $table-border-width |
Border width between sibling table bodies. |
$table-foot-border-width |
boolean | 2 * $table-border-width |
Border width between table body and footer. |
$table-striped-selector |
boolean | odd |
Selector for table striping. |
$table-striped-box-shadow |
boolean | inset 0 0 0 999rem rgba($uibase-900, .075) |
Shadow overlay for striped tables. |
$table-striped-alt-box-shadow |
boolean | inset 0 0 0 999rem rgba($white, .125) |
Alternate shadow overlay for striped tables. |
$table-hover-box-shadow |
boolean | inset 0 0 0 999rem rgba($uibase-900, .125) |
Shadow overlay for hoverable tables. |
$table-hover-alt-box-shadow |
boolean | inset 0 0 0 999rem rgba($white, .2) |
Alternate shadow overlay for hoverable tables. |
$table-scroll-breakpoints |
list | map-keys($grid-breakpoints) |
Breakpoint list for responsive scrollable tables. |
$table-themes |
map | () |
Map of color schemes for tables. |
$table-colors |
list | $base-colors |
Colors to mix and merge into $table-themes
|
$table-levels |
map | $level-context |
Levels to mix table colors with. |
Mixins
Here are the mixins related to tables that we use to help generate our CSS. You can also uses these mixins to generate your own custom components or utilities.
table-row-variant
Build a color variant to be applied to a table row, <tr>
, element.
Argument | Type | Default | Description |
---|---|---|---|
$state |
string | '' |
The value appended to generate the class .table-#{$state} .
|
$bg |
string | none |
Background color for a table row and it's direct <th> and <td> cells.
|
$hover-bg |
string | none |
Hover activated background color for a table row and it's direct <th> and <td> cells, when used in a table with .table-hover .
|
table-scroll
Enable horizontal scrolling on a <table>
element.