What it is
A table with many columns, or one built with fixed measurements instead of flexible ones, is naturally wide — which is fine on a desktop screen, but doesn't shrink down to fit a much narrower phone screen the way most other content on a well-built page does. Instead, it either forces the whole page to scroll sideways or gets uncomfortably squeezed and hard to read.
Why it matters
Sideways scrolling is one of the more jarring things a visitor can run into on a phone — it breaks the normal up-and-down scrolling pattern people expect everywhere else on the web, and it's easy to genuinely miss content sitting just off-screen to the right without realizing it's there at all. On a page that's otherwise perfectly mobile-friendly, one wide, unwrapped table can be the single thing that makes the whole experience feel broken to a mobile visitor.
How to fix it
- Identify which tables on your site have many columns or were built with fixed pixel widths rather than flexible ones.
- Wrap each wide table in a container with the CSS property
overflow-x: auto— this keeps the table's own layout intact but lets a visitor scroll just that table sideways with a finger swipe, instead of the whole page shifting. - For tables with a lot of columns, consider a responsive table pattern instead — for example, stacking each row into its own labeled card on narrow screens rather than keeping the traditional grid layout at every size.
- If you're using a website builder, check whether its table block already has a "mobile scroll" or "responsive" toggle before building a custom fix.
- Test the fix on an actual narrow phone screen (or your browser's mobile preview mode), not just by resizing a desktop browser window, since touch scrolling behaves differently than a mouse.