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:

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