Table

The table reset provides minimal styles and responsive functionality to semantic HTML5 tables.

Responsive

By default, tables will be responsive, meaning its rows will collapse down to a single-column of information.

Unresponsive

When you add a data-responsive="false" attribute to a table element, it will no longer collapse rows down to assingle-column of information. Instead, the table will horizontally scroll when its width exceeds its wrapping container's width (i.e. main column in most circumstances).

Tips

• Do not place <strong> wrapped text inside column/row headings; Not only does the table block style headings as bold already, it will cause issues with responsive heading labels on mobile viewports.
• Creating table cells that span the full width for separation formatting purposes will break responsive styles. It's advised to break your table up into smaller tables with headings to separate table content instead.
• Do not explicitly wrap a .cwf-scroll.cwf-scroll--x element around tables; This is automatically added via the Javascript.
• Do not explicitly add an .sr-only__below--md class to a body's first row when used for headings; This is automatically added via the Javascript.

Javascript

For each table within a page:

1. It's wrapped with a .cwf-scroll.cwf-scroll--x element to ensure horizontal scrolling when the table's width exceeds the viewport width.
2. If its first body row is only headings, that row is given a .sr-only__below--md class to ensure it's hidden on mobile viewports.
3. If it hasn't been explicitly set to be unresponsive (via a data-responsive="false" attribute), data attributes are added to be used for the responsive heading labels.

Examples

Responsive (column headings)

Responsive (column/row headings)

Responsive (first body row of column headings)

Unresponsive