Cornerstone

Tables: Scrollable

Default

For the Default table, the following classes are available to customize the table:

  • unstriped
  • hover
  • stack
  • scroll

Responsive

A responsive table reorders itself on mobile so that it’s easier to view. This is best for simple tables.

Scrollable

For complex tables, it’s best to use a scrollable table. This keeps the information in its original format on mobile and uses a scrolling container.

A caption is required for accessibility but doesn’t need to render on the front end.

<div class="table-scroll" tabindex="0" role="region" aria-labelledby="tcu-table-caption-1">
    <table>
        <caption class="show-for-sr" id="tcu-table-caption-1">Example Scrollable Table</caption>
        <thead>
            <tr>
                <td></td>
                <th scope="col">Column 1</th>
                <th scope="col">Column 2</th>
                <th scope="col">Column 3</th>
                <th scope="col">Column 4</th>
                <th scope="col">Column 5</th>
                <th scope="col">Column 6</th>
                <th scope="col">Column 7</th>
                <th scope="col">Column 8</th>
                <th scope="col">Column 9</th>
                <th scope="col">Column 10</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Row Header</th>
                <td data-title="Column 1">Body</td>
                <td data-title="Column 2">Body</td>
                <td data-title="Column 3">Body</td>
                <td data-title="Column 4">Body</td>
                <td data-title="Column 5">Body</td>
                <td data-title="Column 6">Body</td>
                <td data-title="Column 7">Body</td>
                <td data-title="Column 8">Body</td>
                <td data-title="Column 9">Body</td>
                <td data-title="Column 10">Body</td>
            </tr>
            <tr>
                <th scope="row">Row Header</th>
                <td data-title="Column 1">Body</td>
                <td data-title="Column 2">Body</td>
                <td data-title="Column 3">Body</td>
                <td data-title="Column 4">Body</td>
                <td data-title="Column 5">Body</td>
                <td data-title="Column 6">Body</td>
                <td data-title="Column 7">Body</td>
                <td data-title="Column 8">Body</td>
                <td data-title="Column 9">Body</td>
                <td data-title="Column 10">Body</td>
            </tr>
            <tr>
                <th scope="row">Row Header</th>
                <td data-title="Column 1">Body</td>
                <td data-title="Column 2">Body</td>
                <td data-title="Column 3">Body</td>
                <td data-title="Column 4">Body</td>
                <td data-title="Column 5">Body</td>
                <td data-title="Column 6">Body</td>
                <td data-title="Column 7">Body</td>
                <td data-title="Column 8">Body</td>
                <td data-title="Column 9">Body</td>
                <td data-title="Column 10">Body</td>
            </tr>
        </tbody>
    </table>
</div>