Tables

Responsive tables allow for organizing tabular data in a number of ways. They can be tailored to high or low data density depending on your needs.

This component has a UO Edit Suite template for easy use on Drupal Sites: How to use this template

This component requires a small width window to correctly see the mobile breakdowns, resize your window to see the different display styles.

Examples and Code

Select exampleDefaultCard TablesData Tables

Open Full Example

<table class="table table--responsive">
    <tbody class="table__body">
        <tr class="table__row__header">
            <th class="table__cell table__header">Header 1</th>
            <th class="table__cell table__header">Header 2</th>
        </tr>
        <tr class="table__row">
            <td class="table__cell">Cell 1</td>
            <td class="table__cell">Cell 2</td>
        </tr>
    </tbody>
</table>
<table class="table table--responsive table--no-zebra">
    <tbody class="table__body">
        <tr class="table__row__header">
            <th class="table__cell table__header">Header 1</th>
            <th class="table__cell table__header">Header 2</th>
        </tr>
        <tr class="table__row">
            <td class="table__cell">Cell 1</td>
            <td class="table__cell">Cell 2</td>
        </tr>
    </tbody>
</table>
<table class="table table--responsive table--borders">
    <tbody class="table__body">
        <tr class="table__row__header">
            <th class="table__cell table__header">Header 1</th>
            <th class="table__cell table__header">Header 2</th>
        </tr>
        <tr class="table__row">
            <td class="table__cell">Cell 1</td>
            <td class="table__cell">Cell 2</td>
        </tr>
    </tbody>
</table>

Open Full Example

<table class="table table--responsive-card">
    <tbody class="table__body">
        <tr class="table__row__header">
            <th class="table__cell table__header">Header 1</th>
            <th class="table__cell table__header">Header 2</th>
        </tr>
        <tr class="table__row">
            <td class="table__cell">Cell 1</td>
            <td class="table__cell">Cell 2</td>
        </tr>
    </tbody>
</table>
<table class="table table--responsive-card table--no-zebra">
    <tbody class="table__body">
        <tr class="table__row__header">
            <th class="table__cell table__header">Header 1</th>
            <th class="table__cell table__header">Header 2</th>
        </tr>
        <tr class="table__row">
            <td class="table__cell">Cell 1</td>
            <td class="table__cell">Cell 2</td>
        </tr>
    </tbody>
</table>
<table class="table table--responsive-card table--borders">
    <tbody class="table__body">
        <tr class="table__row__header">
            <th class="table__cell table__header">Header 1</th>
            <th class="table__cell table__header">Header 2</th>
        </tr>
        <tr class="table__row">
            <td class="table__cell">Cell 1</td>
            <td class="table__cell">Cell 2</td>
        </tr>
    </tbody>
</table>

Open Full Example

<table class="table table--data">
    <tbody class="table__body">
        <tr class="table__row__header">
            <th class="table__cell table__header">Header 1</th>
            <th class="table__cell table__header">Header 2</th>
        </tr>
        <tr class="table__row">
            <td class="table__cell">Cell 1</td>
            <td class="table__cell">Cell 2</td>
        </tr>
    </tbody>
</table>
<table class="table table--data table--no-zebra">
    <tbody class="table__body">
        <tr class="table__row__header">
            <th class="table__cell table__header">Header 1</th>
            <th class="table__cell table__header">Header 2</th>
        </tr>
        <tr class="table__row">
            <td class="table__cell">Cell 1</td>
            <td class="table__cell">Cell 2</td>
        </tr>
    </tbody>
</table>
<table class="table table--data table--borders">
    <tbody class="table__body">
        <tr class="table__row__header">
            <th class="table__cell table__header">Header 1</th>
            <th class="table__cell table__header">Header 2</th>
        </tr>
        <tr class="table__row">
            <td class="table__cell">Cell 1</td>
            <td class="table__cell">Cell 2</td>
        </tr>
    </tbody>
</table>

Guidance

When to Use Responsive tables

• Use for complex tabular data: Many columns and rows of small numerical/short data work best.

When to Consider Another Component

• Don’t use for lists: Instead, use list components.
• Don’t use for page layout purposes: Instead use Envelopes or Grids.

Usage Guidance

• Keep information in cells simple: Lots of complex data can cause odd layouts and won’t work well with the qualities of responsive tables.

Elements

Element	Description	Usage	Required	Multiple
Headers	Description of the column	Limit to 2-3	Yes	No
Rows	The row of cells		Yes	Yes

Styles

There are three types of responsive table styles, standard, card, and data. All three display the same on desktop by rearrange differently on mobile.

Classname	Effect	Reason to Use
table--responsive (Default)	Mobile headers are stacked over each cell	Use depending on style needs/preferences
table--responsive-card	Mobile headers are side-by-side with data	Use depending on style needs/preferences
table--data	Mobile display uses standard table styling, but the user must scroll/swipe left and right to see all the data	Use for data-heavy tables that simply will not work with the other stles