Responsive Data Tables

Making data tables work in a responsive world.


HTML tables are a bit of a pain when it comes to responsive web design. A large table with lots of columns will look good on a wide screen, but on a small mobile screen they suck. This is the demo of the blog post about this.

Responsive tabular data – tested in Chrome, Firefox, IE9, Opera and Safari. Based on Responsive Data Tables by CSS Tricks.

With help from:

Demo

Row based data table

Fruit Type of grape Dried Seedless Dry colour

Raisin

white dark

Sultana

white golden

Currant

black dark

Column based data table

fruit

Type of grape Dried Seedless Dry colour

Raisin

white dark

Sultana

white golden

Currant

black dark