Figuration v4.4 is now available!

Tables

Apply various visual styles to tabular content, with various border, color, and responsive layout options.

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.

Check out MDN's HTML table advanced features and accessibility document for additional help when building tables.

Basic Table

Using the most basic table markup, a .table will result in a mostly unstyled table, and will use all available 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 class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td colspan="2">Spanned Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="col"></th>
<th scope="col">Footer 1</th>
<th scope="col">Footer 2</th>
<th scope="col">Footer 3</th>
</tr>
</tfoot>
</table>

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
<table class="table table-striped">
...
</table>
# 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 class="table table-striped-alt bg-dark text-white">
...
</table>

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
<table class="table table-hover">
...
</table>
# 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 class="table table-hover-alt bg-dark text-white">
...
</table>

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
<table class="table table-condensed">
...
</table>

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 class="table w-auto">
...
</table>

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
<table class="table table-divided">
...
</table>

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
<table class="table table-ruled">
...
</table>

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
<table class="table table-pillared">
...
</table>

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
<table class="table table-walled">
...
</table>

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
<table class="table table-celled">
...
</table>

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
<table class="table table-wrapped">
...
</table>

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
<table class="table table-bordered">
...
</table>

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.
<div class="table-scroll">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
<th scope="col">Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>This cell inherits <code>vertical-align: top;</code> from the table</td>
<td>This cell inherits <code>vertical-align: top;</code> from the table</td>
<td>This cell inherits <code>vertical-align: top;</code> from the table</td>
<td>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.</td>
</tr>
<tr class="valign-bottom">
<td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
<td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
<td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
<td>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.</td>
</tr>
<tr>
<td>This cell inherits <code>vertical-align: top;</code> from the table</td>
<td>This cell inherits <code>vertical-align: top;</code> from the table</td>
<td class="valign-middle">This cell is aligned to the middle.</td>
<td>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.</td>
</tr>
</tbody>
</table>
</div>

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.

List of users
# First Name Last Name Username
1 John Doe jdoe
2 Jane Smith jsmith
3 James White jwhite
<table class="table">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>John</td>
<td>Doe</td>
<td>jdoe</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jane</td>
<td>Smith</td>
<td>jsmith</td>
</tr>
<tr>
<th scope="row">3</th>
<td>James</td>
<td>White</td>
<td>jwhite</td>
</tr>
</tbody>
</table>

Use .caption-top to place the <caption>above the table.

List of users
# First Name Last Name Username
1 John Doe jdoe
2 Jane Smith jsmith
3 James White jwhite
<table class="table caption-top">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>John</td>
<td>Doe</td>
<td>jdoe</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jane</td>
<td>Smith</td>
<td>jsmith</td>
</tr>
<tr>
<th scope="row">3</th>
<td>James</td>
<td>White</td>
<td>jwhite</td>
</tr>
</tbody>
</table>

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
<div class="table-scroll">
<table class="table table-bordered">
...
</table>
</div>

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
<div class="table-scroll-xs">
<table class="table table-bordered">
...
</table>
</div>

<div class="table-scroll-sm">
<table class="table table-bordered">
...
</table>
</div>

<div class="table-scroll-md">
<table class="table table-bordered">
...
</table>
</div>

<div class="table-scroll-lg">
<table class="table table-bordered">
...
</table>
</div>

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
<table class="table table-bordered bg-dark border-secondary text-white">
...
</table>

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
<table class="table table-bordered bg-dark border-secondary text-white">
<thead class "bg-dark text-light">
...
</thead>
<tbody>
...
</tbody>
<tfoot class="bg-light text-dark">
...
</tfoot>
</table>

Border Color

Easily recolor 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. Be aware that using utility classes to recolor borders can result in descendants will have their border color updated as well.

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.

# 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 class="table table-bordered border-primary">
...
</table>
# 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 class="table table-divided">
<thead class="border-primary">
...
</thead>
<tbody>
...
</tbody>
<tfoot class="border-danger">
...
</tfoot>
</table>

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
<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-success">...</tr>
<tr class="table-info">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-danger">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
<td class="table-active">...</td>
<td class="table-success">...</td>
<td class="table-info">...</td>
<td class="table-warning">...</td>
<td class="table-danger">...</td>
</tr>

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
Column footer Column footer Column footer
<!-- On rows -->
<tr class="bg-primary text-white">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-info text-white">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger text-white">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
<td class="bg-primary text-white">...</td>
<td class="bg-success">...</td>
<td class="bg-info text-white">...</td>
<td class="bg-warning">...</td>
<td class="bg-danger text-white">...</td>
</tr>

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
<table class="table">
<thead class="text-light bg-primary">
<tr>
<th scope="col">#</th>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
</tr>
</thead>
<tbody>
<tr class="text-info">
<th scope="row">1</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td colspan="2" class="text-success">table cell</td>
<td class="text-danger">table cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td class="text-light bg-success">table cell</td>
<td>Cell</td>
<td class="text-light bg-danger">table cell</td>
</tr>
</tbody>
<tfoot class="bg-info text-light">
<tr>
<th></th>
<th>Footer 1</th>
<th>Footer 2</th>
<th>Footer 3</th>
</tr>
</tfoot>
</table>

Nested Tables

Figuration does have a general recommendation against the use of nested tables as they can create usability and accessibility issues for screen reader users. One recommendation would be to break up complex tables into multiple simpler tables.

Our table styles are not intended to be inherited, meaning that nested tables can be styled independent from the parent.

# Header 1 Header 2 Header 3
1 Cell Cell Cell
Header A Header B Header C
A Cell Cell
B Cell Cell
3 Cell Cell Cell
Footer 1 Footer 2 Footer 3
<table class="table table-bordered table-striped">
<thead>
...
</thead>
<tbody>
...
<tr>
<td colspan="4">
<table class="table table-divided mb-0">
...
</table>
</td>
</tr>
...
</tbody>
</table>

Notes About Nesting

Most .table styles and variants are built using a .table > :not(caption) > * > * selector syntax. The use of the child combinator (>) and univeral selector (*) allow for reduced CSS output since there is the need to style each td and th within a given thead, tbody, or tfoot container. This has the added benefit of preventing most styles from leaking to nested tables.

In pretty much every modern browser, when a table is created with <tr>s as direct children, those <tr> will be wrapped in a <tbody> by default, allowing our table styles to work.

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-head-border-color string null Border color between table header and body.
$table-body-border-width boolean 2 * $table-border-width Border width between sibling table bodies.
$table-body-border-color string null Border color between table sibling table bodies.
$table-foot-border-width boolean 2 * $table-border-width Border width between table body and footer.
$table-foot-border-color string null Border color 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.

@include table-row-variant($state, $bg, $hover-bg);
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.

@include table-scroll();