# 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