Layouts

Every layout only kicks in at the Mobile breakpoint and below. On wider screens, your tables look exactly as your template styles them, apart from long text now wrapping instead of being cut off.

Auto (default)

Auto picks the safest good layout for each table:

Priority columns if you've set columns to hide for that table, and the table has no merged cells or nested tables.
Otherwise Stacked cards, if Auto: use cards for simple tables is on and the table is simple.
Otherwise Side-scrolling.

Use it when you want a sensible result across the whole site without thinking about each table.

Side-scrolling

The table keeps its normal layout inside its own scroll area, so only the table scrolls sideways, not the whole page. Tables with three or more columns keep the minimum width, and you can show the optional swipe hint and edge shadows.

Use it for wide data where comparing across a row matters, like pricing grids, timetables and spec sheets. It also works with any table, including ones with merged cells, which is why it's the safe fallback for every other layout.

Stacked cards

Each row becomes a card, and each value is shown next to its column heading:

Position:      Registered Nurse
Location:      Toronto
Closing date:  November 30, 2026

Cards need one header row, no merged cells (colspan or rowspan), no nested tables and at least one body row. If a table doesn't meet these, it scrolls instead, so it never breaks.

Use it for lists of records, like job openings, staff directories, event lists and product lists, where each row stands on its own.

Priority columns

The columns you choose are hidden on small screens, and the important ones stay visible. If Show 'More details' is on, each row gets a toggle that shows the hidden values with their headings. The toggle uses the native HTML <details> element, so it works without JavaScript and with a keyboard.

You set which columns to hide on the Priority columns tab, or on the table itself with ert-hide-N or data-ert-hide. If no columns are set to hide, or the table has merged cells or nested tables, it scrolls instead.

Use it for tables with a few key columns and some secondary ones, like order history, course lists with codes and room numbers, or comparison tables with notes.