Responsive Tables (2)

Introduction: Responsive Tables — 5th January, 2012.

The following tables change orientation on small screens. A horizontal scroll or swipe is used to view more data. The table head is always visible.

Selector IE7 IE8 IE9 FF 3.6 FF 4 Safari 5 Chrome 5 Opera 10
* selector yes yes yes yes yes yes yes yes
:before :after no yes yes yes yes yes yes yes
:nth-of-type() no no no yes yes yes yes incorrect
background-clip no no yes no yes -webkit- -webkit- buggy
background-repeat incomplete incomplete yes incomplete incomplete incorrect incorrect yes
::selection no no yes -moz- -moz- yes yes yes

The trick is to use display: inline-block; on the table rows and white-space: nowrap; on the table body.


CSS3 Flexible Box model

This table replicates the same layout using display: -webkit-box;

Selector IE7 IE8 IE9 FF 3.6 FF 4 Safari 5 Chrome 5 Opera 10
* selector yes yes yes yes yes yes yes yes
:before :after no yes yes yes yes yes yes yes
:nth-of-type() no no no yes yes yes yes incorrect
background-clip no no yes no yes -webkit- -webkit- buggy
background-repeat incomplete incomplete yes incomplete incomplete incorrect incorrect yes
::selection no no yes -moz- -moz- yes yes yes

This concept needs further work to achieve cross-browser support but I think it has potential!