Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:
- Vertical scrolling content at a width equivalent to 320 CSS pixels;
- Horizontal scrolling content at a height equivalent to 256 CSS pixels;
Except for parts of the content which require two-dimensional layout for usage or meaning.
Checklist – System Foundations
|Are URLs and long text strings properly breaking to wrap?||High||None|
|Do headings, subheadings, dialog titles, paragraphs, and table cell contents, all wrap?||High||None|
|Do containers scroll properly?||High||None|
|Does the site only scroll in one direction at 320×256 in size?||Medium||None|
|Do elements’ size and position scale with the text size?||Medium||None|
Checklist – Components
|Does the entire breadcrumb container and its contents wrap?||High||None|
|Do all dialogs fit on supported screen sizes?||High||None|
|Is the entire value of each column in a table (including the table head) readable?||High||None|
These will be added to the content of the above section when I get to it.
- Responsive Data Tables by Chris Coyier on CSS-Tricks. Note that this is from 2011, so it simultaneously shows that we’ve been doing this for a while and that the solutions here have probably been eclipsed by something else by now.
- Responsive Data Table Roundup by Chris Coyier on CSS-Tricks (last updated in 2019). This one includes:
- Faux table design using a description list.
- Tables & Responsive Design Part 2 which the authors recommend you don’t use because it hides content.
- CSS-only responsive tables by David Bushell
- Responsive table (scrolling solution) by Zurb
- Tablesaw by Filament Group
- FooTable jQuery plugin by Brad Vincent
- rt Responsive Tables jQuery plugin
- Picking a response table solution by Jason Grigsby
- 5 Practical Solutions to Make Responsive Data Tables by Michal Jarosz
- Responsive tables in bootstrap (all are scroll solutions)
- How to use responsive tables without compromising ux by Leticia Schimmel at Lightit
- WCAG-compliant Under-Engineered Responsive Tables by Adrian Roselli
- Designing Mobile Tables by Steven Hoober at UXMatters
- React super responsive tables
- How to create responsive tables with flexbox and react by Gerard van Der Put at Better Programming