Easy Responsive Tables

Styling and template compatibility

Version: 1.0.3

Styling and template compatibility

All plugin styles are scoped to .ert-* classes, so they don't affect the rest of your site. The plugin also guards against common template problems:

  • Long text wraps inside cells at every screen width instead of being cut off. That includes long words, URLs and text joined with non-breaking spaces.
  • Template rules such as table-layout: fixed and overflow: hidden on tables don't clip processed tables.
  • In card layout, template cell borders and backgrounds are replaced by a clean label and value grid with a thin divider. Your card settings (border, background, label color, radius, spacing) win over template CSS.

Cell content wrapper (.ert-cv). In every layout, the plugin wraps each processed cell's content in a <span class="ert-cv">. This is what lets long text wrap reliably. As a result, template or custom CSS that targets direct children of cells, such as td > p or td > a, may no longer match processed tables. Use a descendant selector instead, such as td p or td .ert-cv > p.

Your own overrides. Add CSS to your template's custom CSS file and target the plugin's classes:

Class Element
.ert-wrap, .ert-mode-scroll, .ert-mode-cards, .ert-mode-priority The wrapper around each processed table
.ert-scroll-area The scroll area
.ert-hint The swipe hint
.ert-table The processed table
.ert-cv The cell content wrapper
.ert-more, .ert-more-cell The "More details" toggle and its cell

Edge shadows are hidden by tables or cells with their own background color. If that happens, turn off Show edge shadows or remove the background.

Print: when printed, scroll areas expand to show the whole table, and the swipe hint and "More details" toggles are hidden.

Reduced motion: the stylesheet respects visitors' prefers-reduced-motion setting.