Responsive tables
A table with eight columns will not fit a phone. There are three honest answers, and which one is right depends on whether the reader is scanning down one column or reading across one row.
Scroll it sideways
the default — nothing is hidden, and the page itself never moves
| Invoice | Customer | Raised | Due | Total | Outstanding | Status |
|---|---|---|---|---|---|---|
| INV-0241 | Ferrow Manufacturing | 24 Aug | 23 Sep | $18,240.00 | $9,240.00 | Part paid |
| INV-0239 | Northwind Trading | 09 Sep | 09 Oct | $11,480.00 | $11,480.00 | Sent |
| INV-0236 | Kestrel Logistics | 14 Aug | 13 Sep | $4,820.00 | $4,820.00 | Overdue |
| INV-0233 | Delta Fabrication | 02 Sep | 02 Oct | $9,375.00 | $0.00 | Paid |
The scrollbox is the element that scrolls, not the page. Every one of these in Coffer is relative as well, because an absolutely positioned child — a screen-reader-only label in the last header cell — otherwise escapes it and drags the whole page sideways. That bug was in 35 pages here until it was measured.
Keep the first column still
so you never lose which row you are on
| Invoice | Customer | Raised | Due | Total | Outstanding | Status |
|---|---|---|---|---|---|---|
| INV-0241 | Ferrow Manufacturing | 24 Aug | 23 Sep | $18,240.00 | $9,240.00 | Part paid |
| INV-0239 | Northwind Trading | 09 Sep | 09 Oct | $11,480.00 | $11,480.00 | Sent |
| INV-0236 | Kestrel Logistics | 14 Aug | 13 Sep | $4,820.00 | $4,820.00 | Overdue |
| INV-0233 | Delta Fabrication | 02 Sep | 02 Oct | $9,375.00 | $0.00 | Paid |
Become a list
when the reader cares about one row at a time
Ferrow Manufacturing
- Raised
- 24 Aug
- Due
- 23 Sep
- Total
- $18,240.00
- Outstanding
- $9,240.00
Northwind Trading
- Raised
- 09 Sep
- Due
- 09 Oct
- Total
- $11,480.00
- Outstanding
- $11,480.00
Kestrel Logistics
- Raised
- 14 Aug
- Due
- 13 Sep
- Total
- $4,820.00
- Outstanding
- $4,820.00
Delta Fabrication
- Raised
- 02 Sep
- Due
- 02 Oct
- Total
- $9,375.00
- Outstanding
- $0.00
| Invoice | Customer | Due | Outstanding | Status |
|---|---|---|---|---|
| INV-0241 | Ferrow Manufacturing | 23 Sep | $9,240.00 | Part paid |
| INV-0239 | Northwind Trading | 09 Oct | $11,480.00 | Sent |
| INV-0236 | Kestrel Logistics | 13 Sep | $4,820.00 | Overdue |
| INV-0233 | Delta Fabrication | 02 Oct | $0.00 | Paid |
Narrow the window to see it change. The list is not a table dressed up — it is real markup, so nothing has to pretend to be a cell and a screen reader is not told about columns that are no longer there.