On a phone, a wide product table can drag the entire page sideways. A visitor then has to pan across the screen to read delivery terms or reach the enquiry button. Keep surrounding content within the viewport and preserve a way to compare the table’s rows and columns.

Decide what the table helps people compare

Take a building-materials catalogue with dimensions, finish and packaging for each item. Buyers comparing multiple products may need those values aligned in a table. A single product’s specifications might be easier to read as label-value pairs. Ask a colleague to compare two items and then locate the enquiry form on a phone. That task helps establish whether the table layout is worth preserving.

Keep sideways scrolling inside the component

The W3C’s WCAG reflow guidance describes how most vertically scrolling content should fit at a width equivalent to 320 CSS pixels. A data table can qualify for a two-dimensional layout exception when its relationships require it. The surrounding heading, instructions and enquiry controls should still fit.

For a comparison table that needs its columns, place it in a horizontally scrollable container and retain real table markup with meaningful headers. Give users a visible cue that more columns are available. Check that keyboard users can reach and scroll the region, then continue to the next control. If your implementation needs a focusable wrapper, give it an accessible label and visible focus. In an Arabic version, check where the table starts and whether the scroll cue makes sense in right-to-left reading order.

Test an actual long row before release

Use the longest product name, a long model code and your widest set of columns. At a narrow viewport or equivalent zoom, verify that the page itself stays inside the window. Check that users can read each cell, reach the last column and move on to the form without dragging the whole page sideways. Test touch and keyboard input. The website accessibility guide covers other interaction checks.

ITZ’s website development service can review the table template and its mobile behaviour. Send a page where the specification table overflows.

Review your mobile product tables

Share the page URL, the information buyers need to compare and any Arabic version. Use the form to discuss whether the page needs a scrollable table, a simpler layout or both. Review Your Mobile Product Tables