Mobile-first tables: what breaks at 360 pixels and how to fix it

Most comparison tables are designed on a wide monitor and then "adapted". On a phone they turn into a horizontal scroll nobody uses.

What breaks:
— eight columns squeeze into unreadable slivers;
— the CTA column ends up off-screen to the right;
— the highlighted row loses its meaning once the row is taller than the viewport.

Patterns that survive:
— card stack: each row becomes a card with the product name on top, three key facts, one button. The comparison happens by scrolling vertically;
— sticky first column: product names stay fixed while feature columns scroll horizontally. Works only if columns are few;
— column selector: the visitor picks which two or three attributes to compare. Rarely used, but effective for data-heavy niches.

Rule of thumb: decide the three most important attributes and design the mobile view around those. Everything else goes behind a "more details" toggle.

Check the click-through on mobile separately. A table that converts on desktop and fails on mobile will hide the problem in blended numbers.