# A phone needs the right table task, not smaller columns

Choose a mobile presentation from what people compare and act on. Keep the same records and state while adapting the way their information is exposed.

By Cobnex editorial. Published 2026-09-10. Updated 2026-09-11.

## Identify the decision the table supports

A service coordinator may scan jobs for overdue work, while a finance reviewer compares amounts across several columns. Both screens contain rows, but their mobile needs differ.

For job triage, a compact record summary with status, due time and an obvious detail action may work well. For numerical comparison, preserving aligned columns in a bounded horizontal scrolling region may be more useful than converting every row into a tall card.

Do not choose the mobile layout solely by counting columns. Observe the task and identify the fields needed together to make its decision. Information moved into a detail view should remain easy to find and should not be required for every routine action.

## Preserve structure when comparison matters

Use semantic table markup for genuinely tabular information, with appropriate header relationships and a useful caption or accessible name. A visual grid made from unrelated text blocks loses the relationships that assistive technology needs.

A table can contain buttons and links without becoming an ARIA grid. An interactive grid introduces additional keyboard behaviour and focus management. Choose that model when the task requires it, not because a component library uses the word grid in its name.

### One data state supports task-specific presentations

Desktop and mobile views share query, selection and record identity. Only the presentation changes with available space and the user's task.

1. **Query state**: Filters, ordering and page or cursor
2. **Stable records**: Authorised data with durable row identifiers
3. **Presentation**: Comparison table or concise record summary
4. **Action and detail**: Open or update the same identified record

## Keep selection independent of row position

If the user selects the third row and then changes sort order, the selection must follow the record, not the index. This becomes especially important when a mobile summary and desktop table render different subsets or orders.

Define what Select all means. It could mean the visible page or every matching result. State the scope beside the action and reconfirm it for consequential bulk operations. A checkbox at the top of a table cannot communicate that distinction by itself.

When filters change, decide whether hidden selections remain and make them visible in the selection summary. Otherwise a person can act on records they no longer know are selected.

## Contain overflow without hiding actions

For a comparison table, keep horizontal scrolling inside the table region rather than widening the whole page. Make the scrollable area discoverable and operable with the supported keyboard and assistive-technology combinations.

Use sticky headers or identifiers only when they improve orientation without covering content. On a narrow phone, several pinned columns can leave almost no room for the data the user is trying to inspect.

Long names, empty values and error states belong in the design. Fixed row heights that work for sample names can clip the actual customer's details or a validation message.

## Keep navigation state when opening a record

After viewing a job and returning, restore the useful filter, sort and page context. The person should not have to reconstruct an overdue-work list after every detail view.

Treat mobile as a complete workflow. Filters, selection summaries, pagination and confirmations all need deliberate placement. Making the rows fit while leaving the controls off-screen produces a narrow screenshot, not a usable phone experience.

## Sources

- [W3C WAI: tables tutorial](https://www.w3.org/WAI/tutorials/tables/)
- [W3C APG: table pattern](https://www.w3.org/WAI/ARIA/apg/patterns/table/)
- [W3C WAI: reflow](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html)