Websites & patient experience · Practical guide

Keep wide tables from stretching the whole phone page

A detailed table may legitimately need more width than a phone offers. If the whole page becomes wide, visitors must also scroll ordinary headings and paragraphs sideways.

Healthcare website and appointment calendar displayed on devices at an empty clinic reception.
Make the website useful for the people who use your practice.

What to change

Ask your supplier to contain a genuinely wide table in a clear usable area while preserving the readability of surrounding explanations and access to every column.

A worked example

Illustrative example

A visitor pans a comparison table horizontally while the page heading and explanatory text remain fitted to the screen above it.

Healthcare website design showing connected desktop and mobile service and enquiry layouts.
Make the service and next step clear on every screen.
Healthcare website accessibility illustrated by a focus outline, keyboard key, contrast samples and form.
Review keyboard access, contrast and understandable form fields.

Why this matters to your practice

Some tables genuinely need more width than a phone provides. The surrounding page should still remain comfortable to read. Ask your supplier to contain any sideways movement within the table and make the additional columns discoverable. Review the first and last columns with larger text, checking that row meaning is preserved. Simply hiding overflow can remove the very information someone wanted to compare, while widening every paragraph makes the entire page harder to use.

A practical review example

A visitor comparing several service attributes may need to move sideways within the table. Ask your supplier to demonstrate how they discover the additional columns, reach the last one and retain the row's meaning. Then read the paragraph beneath it. That ordinary text should still fit the screen. Review larger text and keyboard movement too. Simply hiding the extra width can conceal essential information, while allowing the table to widen every element makes the whole guide unnecessarily difficult to read.

How to check the result

Accept when all table content is reachable within an understandable local scroll area and ordinary page content retains its normal reading width.

A mistake to avoid

Clipping excess columns can make a screenshot look neat while removing the information people opened the table to compare.

Turn reading into a next step

Your action checklist

Work through these checks with your team or supplier. Tick the ones you have resolved and leave unknowns open.

Checks to discuss

Record what you know, what is still missing and the answer you need from your team or supplier.

Use project decisions only, without personal, patient or confidential details. Entries stay in this page and are not submitted to Kay & Co. Copy or download before leaving; this page does not save your notes.

Further reading

These sources provide background for the topic. The practice examples and checklist are illustrative planning suggestions from Kay & Co.

Related guides

Need help with this?

Tell us what is getting in the way. Kay & Co. can help you understand the options and turn the next step into something that works for your practice.

Explore websites & patient experience services or discuss your project.

Try the free Healthcare Digital Planner to find your starting priority.