logo Atlas Design

Table

The table element helps organize content into rows and columns. The table class adds basic styles to the tables fast and easily. Adding supported modifiers will get a custom and responsive look to the table.

Usage

Here is an example of applying table class to the table element:

Table caption
Heading row Heading cell Heading cell
Row one Cell Cell
Row two Cell Cell
Row three Cell Cell
Footer row Cell Cell
HTML 
<table class="table">
    <caption>
        Table caption
    </caption>
    <thead>
        <tr>
            <th>Heading row</th>
            <th>Heading cell</th>
            <th>Heading cell</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row one</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr>
            <td>Row two</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr>
            <td>Row three</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Footer row</th>
            <th>Cell</th>
            <th>Cell</th>
        </tr>
    </tfoot>
</table>

For cases in which a table has many columns, the table-wrapper class is available to handle the overflow. This class should be applied to the table's parent element.

Note: data-focusable-if-scrollable, the attribute we use to programmatically make elements focusable if they are scrollable, is left to you to implement. Our implementation lives in /site/src/scaffold/scripts/focusable-if-scrollable.ts

Heading row Heading cell Heading cell Heading cell Heading cell Heading cell Heading cell
Row one Cell Cell Cell Cell Cell Cell
Row two Cell Cell Cell Cell Cell Cell
Row three Cell Cell Cell Cell Cell Cell

Modifiers

All modifier classes should be applied in conjunction with the .table class.

Simple

table-simple gives table only horizontal cell borders.

Heading row Heading cell Heading cell
Row one Cell Cell
Row two Cell Cell
Row three Cell Cell

Complex

table-complex gives table a completely bordered cell layout with a heavily stylized header row.

Heading row Heading cell Heading cell
Row one Cell Cell
Row two Cell Cell
Row three Cell Cell

Borderless

table-borderless removes all table cell borders.

Heading row Heading cell Heading cell
Row one Cell Cell
Row two Cell Cell
Row three Cell Cell

Striped

table-striped adds background color to every even row.

Heading row Heading cell Heading cell
Row one Cell Cell
Row two Cell Cell
Row three Cell Cell
Row four Cell Cell
Row five Cell Cell

Size

table-sm/table-lg makes table more or less condensed than the default.

Heading row Heading cell Heading cell
Row one Cell Cell
Row two Cell Cell
Row three Cell Cell
Heading row Heading cell Heading cell
Row one Cell Cell
Row two Cell Cell
Row three Cell Cell

Stacked on mobile

table-stacked-mobile stacks table cells on mobile screen sizes. Please use it wisely due to its unusual appearance, it is not the default behavior for the tables.

Heading row Heading cell Heading cell
Row one Cell Cell
Row two Cell Cell
Row three Cell Cell
Footer row Footer cell Footer cell

Figma