Tables and price lists on mobile: make them readable

Key takeaways

Responsive tables on mobile are a design problem, not a coding one. A table with five columns cannot be read on a screen that fits two. You have four options: cut columns, stack rows into cards, let the table scroll in its own frame, or let visitors pick what to compare. The right one depends on what the reader needs.

• A phone screen comfortably fits two or three columns of text.
• Price lists read best as stacked cards, one item per block.
• Comparison tables need the first column fixed while the rest scroll.
• An image of a table cannot be read by Google, screen readers or zoom.

Why do tables break on mobile?

Tables break on mobile because they are built around width. Each column needs a minimum space for its content, and a phone in portrait is about 360 to 430 CSS pixels wide. Three columns of short text fit. Five do not, so either the text shrinks to nothing or the table pushes past the edge of the screen.

Tables are also where businesses put their most commercially important information: prices, packages, specifications, opening times and delivery charges. When the table fails, the visitor loses the very detail they came for.

• Why mobile-friendly web design is essential for UK businesses
• Website scrolls sideways on mobile? Causes and fixes

What are the four ways to handle a table on mobile?

There are four practical patterns. Each keeps the content as real text, which matters for search engines, screen readers and visitors who zoom. Choose by what the reader is trying to do with the information.

• Simplify: remove or merge columns so the table fits in two or three.
• Stack: turn each row into a card with label and value pairs.
• Scroll: keep the table and let it scroll sideways inside its own frame.
• Select: let the visitor choose two or three items to compare side by side.

Which pattern suits which content?

Match the pattern to the task. If people look up one row, such as the price of one service, stack the rows. If they compare across rows, such as three packages, keep the columns visible. Nielsen Norman Group's guidance on mobile tables makes the same distinction between looking up a value and comparing several.

• Price list of services: stack as cards, with name, price and what is included.
• Opening hours: a simple two-column table fits as it is.
• Three packages compared: scrollable table with the feature column fixed.
• Product specifications: stacked label and value pairs.
• Delivery charges by zone: simplify to two columns, or stack.
• Large product comparison: let visitors select items to compare.

• Should you show prices on your website?
• Comparison pages: win buyers choosing between suppliers

How do you make a scrolling table usable?

If a table must scroll sideways, make only the table scroll, not the page, and make it obvious. Keep the first column fixed so the reader always knows which row they are on. Show part of the next column at the edge of the screen as a cue that there is more, and consider a short note such as 'Swipe to see more'.

WCAG's reflow criterion expects pages to work without sideways scrolling at 320 CSS pixels wide but exempts data tables, since they need two dimensions to be understood. A contained, scrollable table meets that. A table that drags the whole page sideways does not.

• Mobile accessibility: the WCAG checks for small screens

Why not use an image or a PDF of the table?

Because nobody can read it. An image of a table shrinks to fit the phone, turning 14px text into 5px text. It cannot be zoomed cleanly, is invisible to screen readers without lengthy alternative text, and gives Google no text to index. A PDF price list has the same problems and takes the visitor out of the site.

It is tempting because it is quick: export from a spreadsheet and upload. The cost is that your prices, which are often what a mobile visitor most wants, become the least accessible content on the site.

• PDFs on a mobile website: why menus and brochures fail

What does it cost, and when is a table the wrong format?

Reworking a handful of tables is small-scale template and content work, usually within an indicative £500 to £3,000 for mobile fixes on an existing site. A reusable card or comparison component costs more to build once and saves time on every table after.

Sometimes the honest answer is that a table is the wrong format. If the table exists to show that your premium package has more ticks, three short paragraphs may sell it better on a phone. If a specification has forty rows, most visitors need five of them, with the rest in a collapsed section.

• Does Google index content hidden on mobile?

What does this look like in practice?

A pattern we see on service and trade sites: a pricing page with a six-column table of services, durations, call-out fees, weekday rates, weekend rates and notes. On a laptop it is a model of transparency. On a phone the last three columns are off screen and there is nothing to suggest they exist.

Mobile visitors see the service names and durations and no prices, and conclude the firm does not publish them. Rebuilding the table as one card per service, with the price in large type, puts the answer on the first screen. Global Bridge Labs (GBL) reviews every table on a phone before a site goes live.

• See client work
• Website Design & Development for UK businesses
• Make your website work properly on mobile

Mobile table checklist

• List every table on the site and open each on a phone.
• Decide whether readers look up one row or compare several.
• Cut any column that is not needed to make a decision.
• Stack look-up tables into cards.
• For comparisons, fix the first column and let the rest scroll.
• Replace images and PDFs of tables with real text.
• Check the result at 320px wide.

Next step

Open your pricing or services table on a phone and ask whether a new visitor could find one price in ten seconds. If not, the table needs a different shape.