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: nowrap
is optional on the<table>
element- Add
min-width
to 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