Skip to main content
Figuration v3 Preview Available!
Content

Styles for displaying content with some of the most commonly used HTML elements, including normalization, typography, images, tables, buttons, forms, and more.

Tables

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.

Contents

Examples

Using the most basic table markup, here’s how .table-based tables look in Figuration. All table styles are inherited, meaning any nested tables will be styled in the same manner as the parent.

# Table Header 1 Table Header 2 Table Header 3
1 table cell table cell table cell
2 table cell table cell
3 table cell table cell table cell
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
  </tbody>
</table>

You can also invert the colors—with light text on dark backgrounds—with .table-inverse.

# Table Header 1 Table Header 2 Table Header 3
1 table cell table cell table cell
2 table cell table cell
3 table cell table cell table cell
<table class="table table-inverse">
  <thead>
    <tr>
      <th>#</th>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
  </tbody>
</table>

Table Head Options

Similar to default and inverse tables, use one of two modifier classes to make <thead>s appear light or dark gray.

# Table Header 1 Table Header 2 Table Header 3
1 table cell table cell table cell
2 table cell table cell
3 table cell table cell table cell
# Table Header 1 Table Header 2 Table Header 3
1 table cell table cell table cell
2 table cell table cell
3 table cell table cell table cell
<table class="table">
  <thead class="thead-inverse">
    <tr>
      <th>#</th>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-default">
    <tr>
      <th>#</th>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
  </tbody>
</table>

Striped Rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

# Table Header 1 Table Header 2 Table Header 3
1 table cell table cell table cell
2 table cell table cell
3 table cell table cell table cell
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
  </tbody>
</table>
# Table Header 1 Table Header 2 Table Header 3
1 table cell table cell table cell
2 table cell table cell
3 table cell table cell table cell
<table class="table table-striped table-inverse">
  <thead>
    <tr>
      <th>#</th>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
  </tbody>
</table>

Bordered Table

Add .table-bordered for borders on all sides of the table and cells.

# Table Header 1 Table Header 2 Table Header 3
1 table cell table cell table cell
2 table cell table cell
3 table cell table cell table cell
<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
  </tbody>
</table>
# Table Header 1 Table Header 2 Table Header 3
1 table cell table cell table cell
2 table cell table cell
3 table cell table cell table cell
<table class="table table-bordered table-inverse">
  <thead>
    <tr>
      <th>#</th>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
  </tbody>
</table>

Hoverable Rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

# Table Header 1 Table Header 2 Table Header 3
1 table cell table cell table cell
2 table cell table cell
3 table cell table cell table cell
<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
  </tbody>
</table>
# Table Header 1 Table Header 2 Table Header 3
1 table cell table cell table cell
2 table cell table cell
3 table cell table cell table cell
<table class="table table-hover table-inverse">
  <thead>
    <tr>
      <th>#</th>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
  </tbody>
</table>

Condensed Table

Add .table-condensed to make tables more compact by reducing the cell padding.

# Table Header 1 Table Header 2 Table Header 3
1 table cell table cell table cell
2 table cell table cell
3 table cell table cell table cell
<table class="table table-condensed">
  <thead>
    <tr>
      <th>#</th>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
  </tbody>
</table>
# Table Header 1 Table Header 2 Table Header 3
1 table cell table cell table cell
2 table cell table cell
3 table cell table cell table cell
<table class="table table-condensed table-inverse">
  <thead>
    <tr>
      <th>#</th>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
  </tbody>
</table>

Contextual Classes

Use contextual classes to color table rows or individual cells.

Class Description
.table-active Applies the hover color to a particular row or cell
.table-success Indicates a successful or positive action
.table-info Indicates a neutral informative change or action
.table-warning Indicates a warning that might need attention
.table-danger Indicates a dangerous or potentially negative action
# 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
<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-success">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-info">...</tr>

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

Regular table background variants are not available with the inverse table, however, you may use text or background utilities to achieve similar styles.

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

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

Conveying Meaning to Assistive Technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies—such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

Responsive Tables

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally if they become too wide, otherwise, you will not see any difference in these tables. You might need to reduce the size of your browser in order for the examples scroll.

Firefox and Fieldsets

Firefox has some awkward fieldset styling involving width that interferes with the responsive table. This cannot be overridden without a Firefox-specific hack that we don’t provide in Figuration:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

For more information, read this Stack Overflow answer.

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>