New: Cookbooks and AI ExplanationsStep-by-Step recipes to solve problems connected to Roadmaps and Cheat Sheets. Need more details? Use AI buttons for structured and simple explanations with concrete examples throughout the whole platform.Take a look
A five-column pricing table crushed into a strip nobody can read on a phone.
What you'll have at the end
The same data rendering as one labeled card per row on a phone, each value paired with the header it lost, nothing scrolled off-screen, and the table's screen-reader structure still intact.
You need
A wide multi-column data table already on the page, built as a real table element with a caption, a thead of scoped column headers, and a tbody of rows, that squeezes into unreadable text once the viewport narrows to phone width.
Not covered
Choosing between stacking, horizontal scroll, or hiding low-priority columns instead, and building a table's own accessible markup from scratch if it doesn't have one yet: this recipe starts from a table that already has real headers and turns it into cards.
Leans on
A plain list of numbers becomes an accessible data table
go there first if the table doesn't have real headers, scope, and a caption yet.
Finding the element causing a horizontal scrollbar on mobile
go there if a wide table drags the entire page into a sideways scroll, separate from the table simply reading badly.
Picking breakpoints your content needs instead of a device preset
go there for how to choose a breakpoint from your own content instead of guessing one, if 640px doesn't fit your table.
Checked 20 Aug 2026
Part of the Responsive Web Design cookbook