CSS only Responsive Tables
Basic overflow:
| Browser | Sessions | Percentage | New Users | Avg. Duration |
|---|---|---|---|---|
| Chrome | 9,562 | 68.81% | 7,895 | 01:07 |
| Firefox | 2,403 | 17.29% | 2,046 | 00:59 |
| Safari | 1,089 | 2.63% | 904 | 00:59 |
| Internet Explorer | 366 | 2.63% | 333 | 01:01 |
| Safari (in-app) | 162 | 1.17% | 112 | 00:58 |
| Opera | 103 | 0.74% | 87 | 01:22 |
| Edge | 98 | 0.71% | 69 | 01:18 |
| Other | 275 | 6.02% | 90 | N/A |
Flipped axis and overflow:
| Browser | Sessions | Percentage | New Users | Avg. Duration |
|---|---|---|---|---|
| Chrome | 9,562 | 68.81% | 7,895 | 01:07 |
| Firefox | 2,403 | 17.29% | 2,046 | 00:59 |
| Safari | 1,089 | 2.63% | 904 | 00:59 |
| Internet Explorer | 366 | 2.63% | 333 | 01:01 |
| Safari (in-app) | 162 | 1.17% | 112 | 00:58 |
| Opera | 103 | 0.74% | 87 | 01:22 |
| Edge | 98 | 0.71% | 69 | 01:18 |
| Other | 275 | 6.02% | 90 | N/A |
See my blog article for more information
Optional adjustments to suit your content:
white-space: nowrapis optional on the<table>element- Add
min-widthto cells to better space content - Wrap the flip CSS in a media query?
Please note: this CodePen has Autoprefixer enabled. You may need vendor prefixes for full CSS gradient and Flexbox support.
Supports: IOS7+, Android 4.3+
by: David Bushell
COMMENTS