Per-table classes and attributes

You can set the layout of any single table. Add a class in your editor's table properties, or edit the HTML source.

Class or attribute	Effect
ert-scroll	Always side-scroll.
ert-cards	Stacked cards. Falls back to scrolling if the table isn't simple.
ert-priority	Priority columns. Needs columns to hide.
ert-hide-3	Hides column 3 on small screens. You can add more than one, such as ert-hide-2 ert-hide-4.
data-ert-hide="2,4"	Hides columns 2 and 4 on small screens.
data-ert-mode="cards"	The same as the classes. Values: auto, scroll, cards, priority.
ert-ignore or data-ert="ignore"	Never touch this table. ert-ignore also works on a wrapper element around one or more tables.

The layout classes ert-scroll, ert-cards and ert-priority always win over the Only these tables include selectors and the Article content only scope. Exclude rules, ert-ignore and Skip tables in menus still apply.

Hidden columns from the table and from the Priority columns tab are combined.

Examples

A table that always becomes cards:

<table class="ert-cards">
  <thead>
    <tr><th>Position</th><th>Location</th><th>Closing date</th></tr>
  </thead>
  <tbody>
    <tr><td>Registered Nurse</td><td>Toronto</td><td>November 30, 2026</td></tr>
    <tr><td>Office Manager</td><td>Ottawa</td><td>December 15, 2026</td></tr>
  </tbody>
</table>

Priority columns that hide columns 3 and 4 on phones:

<table class="ert-priority" data-ert-hide="3,4">
  <thead>
    <tr><th>Plan</th><th>Price</th><th>Storage</th><th>Support</th></tr>
  </thead>
  <tbody>
    <tr><td>Basic</td><td>$19</td><td>10 GB</td><td>Email</td></tr>
    <tr><td>Pro</td><td>$49</td><td>100 GB</td><td>Phone</td></tr>
  </tbody>
</table>

The same thing using classes only, which is handy if your editor removes data- attributes:

<table class="ert-priority ert-hide-3 ert-hide-4"> ... </table>

Always side-scroll a wide timetable:

<table class="ert-scroll">
  <caption>Fall 2026 class schedule</caption>
  ...
</table>

Leave one table, or a whole area, untouched:

<table class="ert-ignore"> ... </table>

<div class="ert-ignore">
  <table> ... </table>
  <table> ... </table>
</div>

Tip: some editors remove classes or attributes they don't recognize. See Troubleshooting.