v4 Beta now available! Try it out! Feedback welcome!
Looking for v3 docs?

Tables

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

Page Contents

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
<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.
<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>

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>

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 #

.tables 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.

# 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>

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.

@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();