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: fixedandoverflow: hiddenon 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.