Table

Tables are used to display medium to high density content particularly suited for a scrollable, filterable, and sortable format.

Default table

Create a basic table with default styles by adding .hc-table to a parent <table> element. Each <tr> should have the class .hc-tr and each <td> and <th> containing content should have the class .hc-td and .hc-th respectively.

The use of <thead> to wrap the table header and tbody to wrap the table body are optional for basic data tables. Note that when you introduce table controls they will become necessary, as explained below. We recommend always including them regardless.

Name	Group	Status
Tommy Biscotti	Fairview Elementary	Active
Freddie Spaghetti	Discovery School	Active

HTML

Expand Edit in Playground Copy


<table class="hc-table">
  <thead class="hc-thead">
    <tr class="hc-tr">
      <th class="hc-th">Name</th>
      <th class="hc-th">Group</th>
      <th class="hc-th">Status</th>
    </tr>
  </thead>
  <tbody class="hc-tbody">
    <tr class="hc-tr">
      <td class="hc-td">Tommy Biscotti</td>
      <td class="hc-td">Fairview Elementary</td>
      <td class="hc-td">
        <span class="hc-badge hc-badge--success">Active</span>
      </td>
    </tr>
    <tr class="hc-tr">
      <td class="hc-td">Freddie Spaghetti</td>
      <td class="hc-td">Discovery School</td>
      <td class="hc-td">
        <span class="hc-badge hc-badge--success">Active</span>
      </td>
    </tr>
  </tbody>
</table>

Column sizing is handled by default based on the content inside of a column’s cells, just like with any table using the browser default. Use the variants and attributes below to override this and other defaults.

Zebra stripes

To alternate the row color in a larger table to provide some additional visual contrast, add the class .hc-table--zebra to the table element itself.

Name	Group	Status
Tommy Biscotti	Fairview Elementary	Active
Freddie Spaghetti	Discovery School	Active
Johnny Salame	St. Charles Borromeo	Pending

HTML

Expand Edit in Playground Copy


<table class="hc-table hc-table--zebra">
  <thead class="hc-thead">
    <tr class="hc-tr">
      <th class="hc-th">Name</th>
      <th class="hc-th">Group</th>
      <th class="hc-th">Status</th>
    </tr>
  </thead>
  <tbody class="hc-tbody">
    <tr class="hc-tr">
      <td class="hc-td">Tommy Biscotti</td>
      <td class="hc-td">Fairview Elementary</td>
      <td class="hc-td">
        <span class="hc-badge hc-badge--success">Active</span>
      </td>
    </tr>
    <tr class="hc-tr">
      <td class="hc-td">Freddie Spaghetti</td>
      <td class="hc-td">Discovery School</td>
      <td class="hc-td">
        <span class="hc-badge hc-badge--success">Active</span>
      </td>
    </tr>
    <tr class="hc-tr">
      <td class="hc-td">Johnny Salame</td>
      <td class="hc-td">St. Charles Borromeo</td>
      <td class="hc-td">
        <span class="hc-badge hc-badge--info">Pending</span>
      </td>
    </tr>
  </tbody>
</table>

Hover highlighting

For tables that contain actions or where it’s important to let the user know which row they’re interacting with, apply the class .hc-table--hover to the table element. This works seamlessly with zebra stripes if you combine the two.

Name	Group	Status
Tommy Biscotti	Fairview Elementary	Active
Freddie Spaghetti	Discovery School	Active
Johnny Salame	St. Charles Borromeo	Pending

HTML

Expand Edit in Playground Copy


<table class="hc-table hc-table--zebra hc-table--hover overflow-x-scroll">
  <thead class="hc-thead">
    <tr class="hc-tr">
      <th class="hc-th">Name</th>
      <th class="hc-th">Group</th>
      <th class="hc-th">Status</th>
    </tr>
  </thead>
  <tbody class="hc-tbody">
    <tr class="hc-tr">
      <td class="hc-td">Tommy Biscotti</td>
      <td class="hc-td">Fairview Elementary</td>
      <td class="hc-td">
        <span class="hc-badge hc-badge--success">Active</span>
      </td>
    </tr>
    <tr class="hc-tr">
      <td class="hc-td">Freddie Spaghetti</td>
      <td class="hc-td">Discovery School</td>
      <td class="hc-td">
        <span class="hc-badge hc-badge--success">Active</span>
      </td>
    </tr>
    <tr class="hc-tr">
      <td class="hc-td">Johnny Salame</td>
      <td class="hc-td">St. Charles Borromeo</td>
      <td class="hc-td">
        <span class="hc-badge hc-badge--info">Pending</span>
      </td>
    </tr>
  </tbody>
</table>

Column sizing

Restrict columns to fit the smallest content within them by adding the class .hc-th--shrink to the table header for that column, and then .hc-td--shrink to the data cells in that column.

Alternatively, set one column to fill all available space, pushing all other columns to be as small as possible, by adding .hc-th--grow and .hc-td--grow to that column’s table header and data cells. Note that this will force the other column’s to potentially wrap their text, as seen in the second example. You can remediate that by applying .hc-th--shrink and .hc-td--shrink to those columns in tandem, as seen in the third example.

Right column only with shrink:
Name	Group	Status
Tommy Biscotti	Fairview Elementary	Active
Freddie Spaghetti	Discovery School	Active

Left column only with grow:
Name	Group	Status
Tommy Biscotti	Fairview Elementary	Active
Freddie Spaghetti	Discovery School	Active

Left column with grow, center and right columns with shrink:
Name	Group	Status
Tommy Biscotti	Fairview Elementary	Active
Freddie Spaghetti	Discovery School	Active

HTML

Expand Edit in Playground Copy


<table class="hc-table hc-table--zebra">
  <caption class="mb-4 text-left">Right column only with shrink:</caption>
  <thead class="hc-thead">
    <tr class="hc-tr">
      <th class="hc-th">Name</th>
      <th class="hc-th">Group</th>
      <th class="hc-th hc-th--shrink">Status</th>
    </tr>
  </thead>
  <tbody class="hc-tbody">
    <tr class="hc-tr">
      <td class="hc-td">Tommy Biscotti</td>
      <td class="hc-td">Fairview Elementary</td>
      <td class="hc-td hc-th--shrink">
        <span class="hc-badge hc-badge--success">Active</span>
      </td>
    </tr>
    <tr class="hc-tr">
      <td class="hc-td">Freddie Spaghetti</td>
      <td class="hc-td">Discovery School</td>
      <td class="hc-td hc-th--shrink">
        <span class="hc-badge hc-badge--success">Active</span>
      </td>
    </tr>
  </tbody>
</table>
<table class="hc-table hc-table--zebra">
  <caption class="mb-4 text-left">Left column only with grow:</caption>
  <thead class="hc-thead">
    <tr class="hc-tr">
      <th class="hc-th hc-th--grow">Name</th>
      <th class="hc-th">Group</th>
      <th class="hc-th">Status</th>
    </tr>
  </thead>
  <tbody class="hc-tbody">
    <tr class="hc-tr">
      <td class="hc-td hc-th--grow">Tommy Biscotti</td>
      <td class="hc-td">Fairview Elementary</td>
      <td class="hc-td">
        <span class="hc-badge hc-badge--success">Active</span>
      </td>
    </tr>
    <tr class="hc-tr">
      <td class="hc-td hc-th--grow">Freddie Spaghetti</td>
      <td class="hc-td">Discovery School</td>
      <td class="hc-td">
        <span class="hc-badge hc-badge--success">Active</span>
      </td>
    </tr>
  </tbody>
</table>
<table class="hc-table hc-table--zebra">
  <caption class="mb-4 text-left">Left column with grow, center and right columns with shrink:</caption>
  <thead class="hc-thead">
    <tr class="hc-tr">
      <th class="hc-th hc-th--grow">Name</th>
      <th class="hc-th hc-th--shrink">Group</th>
      <th class="hc-th hc-th--shrink">Status</th>
    </tr>
  </thead>
  <tbody class="hc-tbody">
    <tr class="hc-tr">
      <td class="hc-td hc-td--grow">Tommy Biscotti</td>
      <td class="hc-td hc-td--shrink">Fairview Elementary</td>
      <td class="hc-td hc-td--shrink">
        <span class="hc-badge hc-badge--success">Active</span>
      </td>
    </tr>
    <tr class="hc-tr">
      <td class="hc-td hc-td--grow">Freddie Spaghetti</td>
      <td class="hc-td hc-td--shrink">Discovery School</td>
      <td class="hc-td hc-td--shrink">
        <span class="hc-badge hc-badge--success">Active</span>
      </td>
    </tr>
  </tbody>
</table>

Long content

By default, cells with long content in them will wrap that content. This may be undesireable, often for cells with more complicated components in them or when you want to make sure, for instance, that a series of badges or actions all sit in a line.

If you know the content won’t be very wide, set these columns to never wrap by adding the class .hc-td--shrink to the data cells. If the content is long and you’d like it to truncate instead, use .hc-td--truncate. These classes exist for table headers as well but use th instead in the classname.

Default behavior:
Title	Author	Date
There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They're heading in this direction.	George Lucas	5/6/1980

Truncating just the long content:
Title	Author	Date
There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They're heading in this direction.	George Lucas	5/6/1980

Truncating long content and nowrapping short content:
Title	Author	Date
There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They're heading in this direction.	George Lucas	5/6/1980

HTML

Expand Edit in Playground Copy


<!-- default behavior -->
<table class="hc-table hc-table--zebra">
  <caption class="mb-4 text-left">Default behavior:</caption>
  <thead class="hc-thead">
    <tr class="hc-tr">
      <th class="hc-th">Title</th>
      <th class="hc-th">Author</th>
      <th class="hc-th">Date</th>
    </tr>
  </thead>
  <tbody class="hc-tbody">
    <tr class="hc-tr">
      <td class="hc-td">There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They're heading in this direction.</td>
      <td class="hc-td">George Lucas</td>
      <td class="hc-td">5/6/1980</td>
    </tr>
  </tbody>
</table>
<!-- truncating long content -->
<table class="hc-table hc-table--zebra">
  <caption class="mb-4 text-left">Truncating just the long content:</caption>
  <thead class="hc-thead">
    <tr class="hc-tr">
      <th class="hc-th">Title</th>
      <th class="hc-th">Author</th>
      <th class="hc-th">Date</th>
    </tr>
  </thead>
  <tbody class="hc-tbody">
    <tr class="hc-tr">
      <td class="hc-td hc-td--truncate">There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They're heading in this direction.</td>
      <td class="hc-td">George Lucas</td>
      <td class="hc-td">5/6/1980</td>
    </tr>
  </tbody>
</table>
<!-- truncating long and nowrapping short -->
<table class="hc-table hc-table--zebra">
  <caption class="mb-4 text-left">Truncating long content and nowrapping short content:</caption>
  <thead class="hc-thead">
    <tr class="hc-tr">
      <th class="hc-th hc-th--grow">Title</th>
      <th class="hc-th hc-th--shrink">Author</th>
      <th class="hc-th hc-th--shrink">Date</th>
    </tr>
  </thead>
  <tbody class="hc-tbody">
    <tr class="hc-tr">
      <td class="hc-td hc-td--truncate">There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They're heading in this direction.</td>
      <td class="hc-td hc-td--shrink">George Lucas</td>
      <td class="hc-td hc-th--shrink">5/6/1980</td>
    </tr>
  </tbody>
</table>

Control bar

Data tables can implement any number and combination of controls, filters, actions, and other elements that determine what data is displayed in the table. These all live at the top of the table, above the table header.

A more complicated example with markup is in the preview below, with a longer explanation of when and where to place certain types of controls.

3 items

Filters

First grade Second grade Third grade Fourth grade Fifth grade
Name	School	Status	Date
Tommy Biscotti	Fairview Elementary	Active	1/1/2015
Freddie Spaghetti	Discovery School	Active	2/3/2018
Johnny Salami	St. Charles Borromeo	Pending	5/5/2020

HTML

Expand Edit in Playground Copy


<table class="hc-table hc-table--zebra hc-table--hover">
  <caption class="hc-table-controls">
    <div class="hc-table-controls-wrapper">
      <div class="hc-table-controls--left">
        <button class="hc-button hc-button--primary">
          Action
        </button>
        <span>
          3 items
        </span>
      </div>
      <div class="hc-table-controls--center">
        <input type="search" class="hc-input hc-input--search hc-input--sm hc-input--pill hc-input--leading-icon" placeholder="Search..." />
      </div>
      <div class="hc-table-controls--right">
        <div class="hc-table-controls-group">
          <div class="hc-dropdown">
            <div class="hc-dropdown-toggle">
              <div class="hc-button hc-button--secondary hc-dropdown-toggle-button" role="button" tabindex="0">
                <i class="hc-icon hc-icon--filter hc-icon--20"></i>
                Filters
              </div>
            </div>
            <div class="hc-dropdown-content hc-dropdown-content--right">
              <menu class="flex flex-col px-3 py-3 gap-2 whitespace-nowrap">
                <label class="hc-form-control hc-form-control--shrink">
                  <input type="checkbox" class="hc-checkbox" />
                  <span class="hc-label">
                    <span class="hc-label-text">First grade</span>
                  </span>
                </label>
                <label class="hc-form-control hc-form-control--shrink">
                  <input type="checkbox" class="hc-checkbox" />
                  <span class="hc-label">
                    <span class="hc-label-text">Second grade</span>
                  </span>
                </label>
                <label class="hc-form-control hc-form-control--shrink">
                  <input type="checkbox" class="hc-checkbox" />
                  <span class="hc-label">
                    <span class="hc-label-text">Third grade</span>
                  </span>
                </label>
                <label class="hc-form-control hc-form-control--shrink">
                  <input type="checkbox" class="hc-checkbox" />
                  <span class="hc-label">
                    <span class="hc-label-text">Fourth grade</span>
                  </span>
                </label>
                <label class="hc-form-control hc-form-control--shrink">
                  <input type="checkbox" class="hc-checkbox" />
                  <span class="hc-label">
                    <span class="hc-label-text">Fifth grade</span>
                  </span>
                </label>
              </menu>
            </div>
          </div>
          <button class="hc-button hc-button--tertiary hc-button--icon" aria-label="Print table data">
            <i class="hc-icon hc-icon--printer hc-icon--20"></i>
          </button>
          <button class="hc-button hc-button--tertiary hc-button--icon" aria-label="Download table data">
            <i class="hc-icon hc-icon--download hc-icon--20"></i>
          </button>
        </div>
      </div>
    </div>
  </caption>
  <thead class="hc-thead">
    <tr class="hc-tr">
      <th class="hc-th hc-th--check">
        <input type="checkbox" class="hc-checkbox" aria-label="Select all rows">
      </th>
      <th class="hc-th hc-th--shrink">
        Name 
        <i class="hc-th-sort hc-icon hc-icon--sort hc-icon--16"></i>
      </th>
      <th class="hc-th hc-th--grow">School</th>
      <th class="hc-th hc-th--shrink">
        Status
        <i class="hc-th-sort hc-icon hc-icon--sort-down hc-icon--solid hc-icon--16"></i></th>
      <th class="hc-th hc-th--shrink">Date</th>
      <th class="hc-th hc-th--shrink">Actions</th>
    </tr>
  </thead>
  <tbody class="hc-tbody">
    <tr class="hc-tr">
      <td class="hc-td hc-td--check">
        <input type="checkbox" class="hc-checkbox" aria-label="Select this row">
      </td>
      <td class="hc-td hc-td--shrink">Tommy Biscotti</td>
      <td class="hc-td hc-td--grow">Fairview Elementary</td>
      <td class="hc-td hc-td--shrink">
        <span class="hc-badge hc-badge--success">Active</span>
      </td>
      <td class="hc-td hc-td--shrink">1/1/2015</td>
      <td class="hc-td hc-td--shrink">
        <button class="hc-button hc-button--primary hc-button--sm hc-button--icon" aria-label="View profile">
          <i class="hc-icon hc-icon--user hc-icon--20"></i>
        </button>
        <button class="hc-button hc-button--primary hc-button--sm hc-button--icon" aria-label="View settings">
          <i class="hc-icon hc-icon--settings hc-icon--20"></i>
        </button>
      </td>
    </tr>
    <tr class="hc-tr">
      <td class="hc-td hc-td--check">
        <input type="checkbox" class="hc-checkbox" aria-label="Select this row">
      </td>
      <td class="hc-td hc-td--shrink">Freddie Spaghetti</td>
      <td class="hc-td hc-td--grow">Discovery School</td>
      <td class="hc-td hc-td--shrink">
        <span class="hc-badge hc-badge--success">Active</span>
      </td>
      <td class="hc-td hc-td--shrink">2/3/2018</td>
      <td class="hc-td hc-td--shrink">
        <button class="hc-button hc-button--primary hc-button--sm hc-button--icon" aria-label="View profile">
          <i class="hc-icon hc-icon--user hc-icon--20"></i>
        </button>
        <button class="hc-button hc-button--primary hc-button--sm hc-button--icon" aria-label="View settings">
          <i class="hc-icon hc-icon--settings hc-icon--20"></i>
        </button>
      </td>
    </tr>
    <tr class="hc-tr">
      <td class="hc-td hc-td--check">
        <input type="checkbox" class="hc-checkbox" aria-label="Select this row">
      </td>
      <td class="hc-td hc-td--shrink">Johnny Salami</td>
      <td class="hc-td hc-td--grow">St. Charles Borromeo</td>
      <td class="hc-td hc-td--shrink">
        <span class="hc-badge hc-badge--info">Pending</span>
      </td>
      <td class="hc-td hc-td--shrink">5/5/2020</td>
      <td class="hc-td hc-td--shrink">
        <button class="hc-button hc-button--primary hc-button--sm hc-button--icon" aria-label="View profile">
          <i class="hc-icon hc-icon--user hc-icon--20"></i>
        </button>
        <button class="hc-button hc-button--primary hc-button--sm hc-button--icon" aria-label="View settings">
          <i class="hc-icon hc-icon--settings hc-icon--20"></i>
        </button>
      </td>
    </tr>
  </tbody>
</table>

Accessibility note

When table headers don’t have an on-screen label, like the checkbox column above, add an appropriate aria-label="" to the cell or inner element. Here, we use aria-label="Select all rows".

As always, form controls should have on-screen labels as well but when space is limited (as in this example again), use appropriate ARIA labels. For the checkboxes, we use aria-label="Select this row", and for the buttons we use aria-label="View profile", etc.

Creating the control bar

To create the table control bar, use a <caption> element with class .hc-table-controls and place it at the top of the table, right below the opening <table> tag. Inside of it, place a <div> with class .hc-table-control-wrapper. We unfortunately need this inner div because the caption element needs to be set to display: table-caption which does not afford a lot of flexibility.

There are 3 groups for controls: left, center, and right. Create them with <div>s that have classes of .hc-table-controls--left, etc.

Left: Button groups that change the display of the table or large-scale changes to the data in the table. This can also contain a row count if you don't intend to use a pagination component or table footer.
Center: Reserved for the search box only. (TBD)
Right: Filters and global table action buttons.

Checkboxes

When using a checkbox column, add the classes .hc-th--check and .hc-td--check respectively to size it correctly.

Selecting a checkbox will automatically highlight the row to give the user a visual indication that the row has been checked.

Advanced data types

Honeycomb has a few additional classes to handle more “advanced” data types. Things like numbers, dates, progress bars, and spark lines are all available with built-in styling.

To style integers, currency, dates, or other numeric values that should be preformatted and right-aligned, use the classes .hc-th--numeric and/or .hc-td--numeric.

Progress bars (TBD) work as normal and can just be dropped in with no changes. Basic trend indicators using icons should use the classes .hc-th--trend and .hc-td--trend.

Name	Total	Trend	Date
Tommy Biscotti	88.43	Improving	08/20/2024
Freddie Spaghetti	110.2	Improving	07/25/2024
Johnny Salami	150	Stable	08/03/2024

HTML

Expand Edit in Playground Copy


<table class="hc-table hc-table--zebra hc-table--hover">
  <thead class="hc-thead">
    <tr class="hc-tr">
      <th class="hc-th hc-th--check">
        <input type="checkbox" class="hc-checkbox" aria-label="Select all rows">
      </th>
      <th class="hc-th hc-th--grow">Name</th>
      <th class="hc-th hc-th--shrink hc-th--numeric">Total</th>
      <th class="hc-th hc-th--shrink hc-th--trend">Trend</th>
      <th class="hc-th hc-th--shrink hc-th--numeric">Date</th>
      <th class="hc-th hc-th--shrink">Progress</th>
    </tr>
  </thead>
  <tbody class="hc-tbody">
    <tr class="hc-tr">
      <td class="hc-td hc-td--check">
        <input type="checkbox" class="hc-checkbox" aria-label="Select this row">
      </td>
      <td class="hc-td hc-td--grow">Tommy Biscotti</td>
      <td class="hc-td hc-td--shrink hc-td--numeric">88.43</td>
      <td class="hc-td hc-td--shrink hc-td--trend">
        <span>Improving</span>
        <i class="hc-icon hc-icon--trend-up hc-icon--success hc-icon--solid hc-icon--20"></i>
      </td>
      <td class="hc-td hc-td--shrink hc-td--numeric">08/20/2024</td>
      <td class="hc-td hc-td--shrink">
        <span class="hc-progress hc-progress--with-label" style="--hc-progress-value: 32;">
      </td>
    </tr>
    <tr class="hc-tr">
      <td class="hc-td hc-td--check">
        <input type="checkbox" class="hc-checkbox" aria-label="Select this row">
      </td>
      <td class="hc-td hc-td--grow">Freddie Spaghetti</td>
      <td class="hc-td hc-td--shrink hc-td--numeric">110.2</td>
      <td class="hc-td hc-td--shrink hc-td--trend">
        <span>Improving</span>
        <i class="hc-icon hc-icon--trend-up hc-icon--success hc-icon--solid hc-icon--20"></i>
      </td>
      <td class="hc-td hc-td--shrink hc-td--numeric">07/25/2024</td>
      <td class="hc-td hc-td--shrink">
        <span class="hc-progress hc-progress--with-label" style="--hc-progress-value: 81;">
      </td>
    </tr>
    <tr class="hc-tr">
      <td class="hc-td hc-td--check">
        <input type="checkbox" class="hc-checkbox" aria-label="Select this row">
      </td>
      <td class="hc-td hc-td--grow">Johnny Salami</td>
      <td class="hc-td hc-td--shrink hc-td--numeric">150</td>
      <td class="hc-td hc-td--shrink hc-td--trend">
        <span>Stable</span>
        <i class="hc-icon hc-icon--arrow-right hc-icon--solid hc-icon--16"></i>
      </td>
      <td class="hc-td hc-td--shrink hc-td--numeric">08/03/2024</td>
      <td class="hc-td hc-td--shrink">
        <span class="hc-progress hc-progress--complete hc-progress--complete--with-icon" data-value="100%">
      </td>
    </tr>
  </tbody>
</table>

Density

Increase the table density by adding the class .hc-table--dense to the <table> element.

Use this for internal data tables or where you have many rows to display, each table column has minimal content, and quickly scanning the table is important.

Increase density

Name	Group	Status
Tommy Biscotti	Fairview Elementary	Active
Freddie Spaghetti	Discovery School	Active
Johnny Salame	St. Charles Borromeo	Pending

HTML

Expand Edit in Playground Copy


<div class="flex flex-row gap-2 items-center pl-1 mb-4">
  <input type="checkbox" 
      class="hc-checkbox" 
      onchange="document.getElementById('hc-table-density').classList.toggle('hc-table--dense')"
      id="table-density"
      checked>
  <label for="table-density">Increase density</label>
</div>
<table class="hc-table hc-table--zebra hc-table--dense" id="hc-table-density">
  <thead class="hc-thead">
    <tr class="hc-tr">
      <th class="hc-th">Name</th>
      <th class="hc-th">Group</th>
      <th class="hc-th">Status</th>
    </tr>
  </thead>
  <tbody class="hc-tbody">
    <tr class="hc-tr">
      <td class="hc-td">Tommy Biscotti</td>
      <td class="hc-td">Fairview Elementary</td>
      <td class="hc-td">
        <span class="hc-badge hc-badge--success">Active</span>
      </td>
    </tr>
    <tr class="hc-tr">
      <td class="hc-td">Freddie Spaghetti</td>
      <td class="hc-td">Discovery School</td>
      <td class="hc-td">
        <span class="hc-badge hc-badge--success">Active</span>
      </td>
    </tr>
    <tr class="hc-tr">
      <td class="hc-td">Johnny Salame</td>
      <td class="hc-td">St. Charles Borromeo</td>
      <td class="hc-td">
        <span class="hc-badge hc-badge--info">Pending</span>
      </td>
    </tr>
  </tbody>
</table>

You can tighten this even further with .hc-table--denser, though this should be reserved only for special circumstances where density is extremely important.

Mobile handling

If your table needs to respond to small screens, wrap the <table> element with two <div>s. The outermost parent should have class .hc-table-responsive and then directly inside containing the table should have class .hc-table-responsive-scroll. This will allow the table to scroll horizontally when necessary.

To set the first table header and cell in each row to stick, add .hc-th--sticky and .hc-td--sticky respectively.

Name	Team	Animal	Color	T-shirt	Flavor	Quote
Tommy Biscotti	Philadelphia Phillies	Koala	Green	Small	Mint Chocolate	"I've got a bad feeling about this!"
Freddie Spaghetti	Michigan Wolverines	Horse	Red	Extra Small	Chocolate Chip	"You gotta try new foods 'cause you might feel good!"

HTML

Expand Edit in Playground Copy


<div class="hc-table-responsive">
  <div class="hc-table-responsive-scroll">
    <table class="hc-table hc-table--zebra">
      <thead class="hc-thead">
        <tr class="hc-tr">
          <th class="hc-th hc-th--shrink hc-th--sticky">Name</th>
          <th class="hc-th hc-th--shrink">Team</th>
          <th class="hc-th hc-th--shrink">Animal</th>
          <th class="hc-th hc-th--shrink">Color</th>
          <th class="hc-th hc-th--shrink">T-shirt</th>
          <th class="hc-th hc-th--shrink">Flavor</th>
          <th class="hc-th hc-th--shrink">Quote</th>
        </tr>
      </thead>
      <tbody class="hc-tbody">
        <tr class="hc-tr">
          <td class="hc-td hc-td--shrink hc-td--sticky">Tommy Biscotti</td>
          <td class="hc-td hc-td--shrink">Philadelphia Phillies</td>
          <td class="hc-td hc-td--shrink">Koala</td>
          <td class="hc-td hc-td--shrink">Green</td>
          <td class="hc-td hc-td--shrink">Small</td>
          <td class="hc-td hc-td--shrink">Mint Chocolate</td>
          <td class="hc-td hc-td--shrink">"I've got a bad feeling about this!"</td>
        </tr>
        <tr class="hc-tr">
          <td class="hc-td hc-td--shrink hc-td--sticky">Freddie Spaghetti</td>
          <td class="hc-td hc-td--shrink">Michigan Wolverines</td>
          <td class="hc-td hc-td--shrink">Horse</td>
          <td class="hc-td hc-td--shrink">Red</td>
          <td class="hc-td hc-td--shrink">Extra Small</td>
          <td class="hc-td hc-td--shrink">Chocolate Chip</td>
          <td class="hc-td hc-td--shrink">"You gotta try new foods 'cause you might feel good!"</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Note that the above example has .hc-td--shrink on every data cell to make sure that there is horizontal scrolling at all times for example purposes. Normally you would not do that and the table would scale down on small screens naturally as text that can wrap, does wrap.

Advanced mobile handling

For more advanced mobile handling, append the class .hc-table-responsive--vertical to the outer wrapping element. You do not need the second wrapping element, .hc-table-responsive-scroll, so that can be omitted.

You also need to add a data-hc-th attribute to each cell that contains that cell’s corresponding header label. For instance, add data-hc-th="Name" to every <td> under a <th> that has as label “Name.” We use this to repeat the table headers next to each data cell for every row.

1 item
Name	Team	Animal	Color	T-shirt	Flavor	Quote
Tommy Biscotti	Philadelphia Phillies	Koala	Green	Small	Mint Chocolate	"I've got a bad feeling about this!"
Freddie Spaghetti	Michigan Wolverines	Horse	Red	Extra Small	Chocolate Chip	"You gotta try new foods 'cause you might feel good!"

HTML

Expand Edit in Playground Copy


<div class="hc-table-responsive hc-table-responsive--vertical">
  <table class="hc-table hc-table--zebra">
    <caption class="hc-table-controls">
      <button class="hc-button hc-button--primary hc-table-controls-mobile-menu">
        <i class="hc-icon hc-icon--menu hc-icon--20"></i>
        <span>Table controls</span>
      </button>
      <div class="hc-table-controls-wrapper">
        <div class="hc-table-controls--left">
          <button class="hc-button hc-button--primary">
            Action
          </button>
          <span>
            1 item
          </span>
        </div>
        <div class="hc-table-controls--center">
          <input type="search" class="hc-input hc-input--search hc-input--sm hc-input--pill hc-input--leading-icon" placeholder="Search..." />
        </div>
        <div class="hc-table-controls--right">
          <div class="hc-table-controls-group">
            <button class="hc-button hc-button--tertiary">
              <i class="hc-icon hc-icon--filter hc-icon--20"></i>
              Filters
            </button>
            <button class="hc-button hc-button--tertiary hc-button--icon" aria-label="Print table data">
              <i class="hc-icon hc-icon--printer hc-icon--20"></i>
            </button>
            <button class="hc-button hc-button--tertiary hc-button--icon" aria-label="Download table data">
              <i class="hc-icon hc-icon--download hc-icon--20"></i>
            </button>
          </div>
        </div>
      </div>
    </caption>
    <thead class="hc-thead">
      <tr class="hc-tr">
        <th class="hc-th">Name</th>
        <th class="hc-th">Team</th>
        <th class="hc-th">Animal</th>
        <th class="hc-th">Color</th>
        <th class="hc-th">T-shirt</th>
        <th class="hc-th">Flavor</th>
        <th class="hc-th">Quote </th>
      </tr>
    </thead>
    <tbody class="hc-tbody">
      <tr class="hc-tr">
        <td class="hc-td" data-hc-th="Name">Tommy Biscotti</td>
        <td class="hc-td" data-hc-th="Team">Philadelphia Phillies</td>
        <td class="hc-td" data-hc-th="Animal">Koala</td>
        <td class="hc-td" data-hc-th="Color">Green</td>
        <td class="hc-td" data-hc-th="T-shirt">Small</td>
        <td class="hc-td" data-hc-th="Flavor">Mint Chocolate</td>
        <td class="hc-td" data-hc-th="Long Quote Label">"I've got a bad feeling about this!"</td>
      </tr>
      <tr class="hc-tr">
        <td class="hc-td" data-hc-th="Name">Freddie Spaghetti</td>
        <td class="hc-td" data-hc-th="Team">Michigan Wolverines</td>
        <td class="hc-td" data-hc-th="Animal">Horse</td>
        <td class="hc-td" data-hc-th="Color">Red</td>
        <td class="hc-td" data-hc-th="T-shirt">Extra Small</td>
        <td class="hc-td" data-hc-th="Flavor">Chocolate Chip</td>
        <td class="hc-td" data-hc-th="Quote">"You gotta try new foods 'cause you might feel good!"</td>
      </tr>
    </tbody>
  </table>
</div>

If the example box above is < 48rem wide you’ll see the stacked mobile handling. You may need to shrink the browser to see this if you’re on a big display.

You can use a control bar that will reduce to an expand/collapse button with the markup above. Add the controls as normal, but right before the .hc-table-controls-wrapper you’ll need to add a button with class .hc-table-controls-mobile-menu to toggle the controls.

There are a few stylistic notes to be aware of when adding this class to the table:

This treatment will only show up when the screen or the main content element (using class .hc-app-content) is 48rem or less in width.
The table cells are tightened up by default to get more information on small screens.
Regardless of whether you apply the zebra stripe class, no striping will occur. All data cells have a white background.
The table headers are repeated for every table data cell using the data-hc-th attribute on the data cell. The content is set to 25% of the width of the row and will truncate if the label is too long for that.