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: IO7+, Android 4.3+

by: David Bushell