How do I fix tables on mobile?
Last checked 31 Aug 2026
Short answer
Wrap the table in a horizontally scrollable container, or ask Lovable to convert it into stacked cards on mobile — plain HTML tables rarely fit a phone screen without one of these changes.
Why tables break on mobile
A table with several columns is often wider than a phone screen. Left as-is, it either causes page-wide horizontal scroll or squashes columns unreadably.
Two standard approaches
| Approach | Best for | Trade-off |
|---|---|---|
| Horizontal scroll container | Data tables users need to compare (pricing, specs) | Requires a scroll gesture; less discoverable |
| Card layout on mobile | Simple row data (e.g. a list of items with 2-3 fields each) | More rebuild work; loses tabular comparison |
Scroll container (simplest)
Wrap the comparison table in a horizontally scrollable container on mobile only, so the rest of the page doesn't scroll horizontally — keep the table as normal columns on desktop.
This confines the scroll to the table itself (overflow-x-auto on a wrapper div), which is usually enough for pricing or spec tables.
Card layout (better UX, more work)
On mobile, replace the table with a stacked card per row, showing each column as a labelled field. Keep the table view on desktop.
This is worth the extra effort for tables users need to actually read carefully on a phone, rather than just glance at.
What usually goes wrong
- Shrinking font size to force the table to fit — it becomes unreadable rather than fitting properly. Use a scroll container or cards instead.
- Applying
overflow-x-autoto the whole page instead of just the table wrapper — this can hide other overflow bugs elsewhere on the page. - Forgetting to test with real (longer) content — a table that fits with short placeholder text may still overflow once real data is in it.
Sources
Was this answer helpful?
Related questions
- AnswerHow do I make my Lovable website look less AI-generated?Set a real colour palette, a font pairing and spacing scale up front, then ask Lovable to remove generic gradients, stock-photo hero clichés and default shadcn styling so the site reads as bespoke.
- AnswerHow do I add animations?Ask for specific, subtle animations (fade-in on scroll, hover states, a smooth page transition) rather than "add animations" generally — Lovable can use Tailwind transitions or a library like Framer Motion depending on what you need.
- AnswerHow do I improve accessibility?Ask Lovable to check colour contrast, add alt text to images, ensure keyboard navigation works, and use semantic HTML/ARIA labels — these cover most common accessibility gaps in generated sites without needing a full audit tool.
- AnswerHow do I make a sticky header?Ask Lovable to make the header `fixed` or `sticky` at the top with a defined z-index, and add top padding to the page content equal to the header's height so it isn't hidden underneath.
