Mosaic Logo

Mosaic Tiles Demo

Table

A data table with a required caption — its accessible name and the name of its scroll region — inside a horizontally scrollable wrapper that a keyboard can reach.

Examples

Columns and rows

Head cells declare scope="col"; the caption is visually hidden but announced.

Accounts
NameEmailRole
A Depositora.depositor@example.testdepositor
Another Depositoranother@example.testdepositor
An Adminrdu@example.testrdu

Per-column cell classes

A monospace address column and a controls column that must not wrap.

Accounts with controls
NameEmailActions
A Depositora.depositor@example.test
EditRemove
Another Depositoranother@example.test
EditRemove
An Adminrdu@example.test
EditRemove

Wider than its column

The wrapper scrolls and carries tabindex="0", so the clipped columns are reachable by keyboard in Safari too. Tab to the table, then use the arrow keys.

Accounts, in full
NameEmailRoleProjectsLast code sentCreatedLast signed inDraftsSubmissions
A Depositora.depositor@example.testdepositor0801, 080C, 080E2026-08-25 09:14 UTC2026-01-122026-08-31 16:02 UTC21
Another Depositoranother@example.testdepositor0801, 080C, 080E2026-08-25 09:14 UTC2026-01-122026-08-31 16:02 UTC21
An Adminrdu@example.testrdu0801, 080C, 080E2026-08-25 09:14 UTC2026-01-122026-08-31 16:02 UTC21