Three ways to present tables on phones

Identify the comparison people need

Shrinking a desktop table can make both labels and values unreadable. Identify whether the task compares the same field across records, reads one record in depth or acts directly from a list.

Comparing stock quantities across products may need a different presentation from checking one order’s delivery details. List the essential comparison fields, fields suitable for details and the identifier that must remain visible.

Reducing visible columns should not remove access to required information. Define where omitted fields can be found and how filters and sorting survive that navigation.

Option one: horizontal scrolling for comparison

When cross-row comparison matters, retain the table and allow horizontal movement. Make the existence of additional columns discoverable and contain the scrolling region so the entire page does not shift unexpectedly.

Consider a persistent row identifier or header using realistic content. An overly wide pinned column can leave little space for the values being compared. Try long names, large numbers and missing values.

The W3C tables tutorial explains relationships between header and data cells. Preserve those relationships when adding a scrolling presentation.

Option two: cards for reading individual records

For reading one record at a time, cards can group its context. Put the title and status first, then show labeled values. Meaning previously supplied by table headers must remain available in the card.

Cards can make cross-record comparison more laborious, especially in a long collection. Do not assume they are universally better on mobile. Review whether sorting and filtering can reduce the work.

Resolve interaction between a clickable card and its inner actions. If details, selection and deletion are all available, make targets and keyboard order unambiguous so one action does not unexpectedly trigger another.

Option three: summaries with a reliable return path

If the list needs only a few decision fields, show a summary and provide details in another view or an expandable region. Keep an identifier, current status and the values needed for the initial decision.

Preserve sorting, filters, selection and position when returning from details. Otherwise people must find the same item again. Also define a return path for a detail view opened directly.

• Compare the three patterns with realistic record counts and long text.
• Exercise selection and editing as well as reading.
• Check narrow widths, enlarged text and keyboard use.

Choose by the task the screen supports instead of enforcing one mobile pattern everywhere.