Tables

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.

<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

<table class="table table-striped">
  ...
</table>

<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

<table class="table table-hover">
  ...
</table>

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

<table class="table table-condensed">
  ...
</table>

Narrow Table

Use our sizing utilities, such as w-auto, to control a table's width.

<table class="table w-auto">
  ...
</table>

Table Borders

Divided Table

Add a horizontal border between rows using .table-divided.

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

<table class="table table-ruled">
  ...
</table>

Pillared Table

Put a vertical border and between columns using .table-pillared.

<table class="table table-pillared">
  ...
</table>

Walled Table

Put a border on the sides of a table, and between columns using .table-walled.

<table class="table table-walled">
  ...
</table>

Celled Table

Put horizontal and vertical borders between rows and columns using .table-celled.

<table class="table table-celled">
  ...
</table>

Wrapped Table

Put a border all around the outisde of a table with .table-wrapped.

<table class="table table-wrapped">
  ...
</table>

Bordered Table

Put a border around the table and every cell with .table-bordered.

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

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

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

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

Always Scrolling

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

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

Inverse Table

Easily create an inverted table with light text on a dark background.

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

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

<table class="table table-bordered border-primary">
  ...
</table>

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

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

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

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

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

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

table-scroll()

Enable horizontal scrolling on a <table> element.

@include table-scroll();