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.
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!