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:

• Stackoverflow – How can I make display block work on a <td> in IE?
• Demo at JSFiddle of this little trick.

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