Table

Easily create nicely looking tables, which come in different styles.


Usage

By default, the table component is applied to all native <table> elements - no additional or unique classes need to be added.

Usage

  • Table caption
    Table Heading Table Heading Table Heading
    Table Footer Table Footer Table Footer
    Table Data Table Data Table Data
    Table Data Table Data Table Data
    Table Data Table Data Table Data
  • <table>
        <caption>...</caption>
        <thead>
            <tr>
                <th>...</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>...</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>...</td>
            </tr>
        </tbody>
    </table>

Columns

To modify the column width or content, you can use other components. Here are some useful examples:

Style Description
Column width Add one of the .col-* classes from the Grid component.
Text alignment Add the .text-left, .text-right or .text-center class from the Text component.
Text style Take a look at the Text component. For example add the .text-bold class.

Markup

<td class="col-12-12 text-right">...</td>
<td class="col-9-10 text-bold">...</td>

Vertical modifier

To vertically center table content, just add the .table-middle class to the <tr> or <td> elements.


Modifiers

To display the table in a different style, just add a modifier class to the the table element.

Table hover

Add the .table-hover class to display a hover state on table rows.

Usage

  • Table Heading Table Heading Table Heading
    Table Data Table Data Table Data
    Table Data Table Data Table Data
    Table Data Table Data Table Data
  • <table class="table-hover">...</table>

Table striped

Add zebra-striping to a table by adding the .table-striped class.

Usage

  • Table Heading Table Heading Table Heading
    Table Data Table Data Table Data
    Table Data Table Data Table Data
    Table Data Table Data Table Data
  • <table class="table-striped">...</table>

Table condensed

Add the .table-condensed class to make table cells more compact.

Usage

  • Table Heading Table Heading Table Heading
    Table Data Table Data Table Data
    Table Data Table Data Table Data
    Table Data Table Data Table Data
  • <table class="table-condensed">...</table>

Responsive Table

If your table happens to be wider than its container element or would eventually get too big on a specific viewport width, just wrap it inside a <div> element and add the .overflow-container class. This creates a container that provides a horizontal scrollbar whenever the elements inside it are wider than the container itself.

Usage

  • Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
    Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer
    Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data
    Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data
    Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data
  • <div class="overflow-container">
        <table>...</table>
    </div>