TLDR;

If you don't want to waste time reading and go straight to the demo then here is a button for you to do just that:

View demo

Once upon a time in the world of web design tables were a standard feature in websites, being commonly used for layout. Those days are long gone and now tables are only used should only be used to display tabular data.

But 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. Web designers are not the type to give up easily and plenty of people have come up with ways to make tables responsive. Below is a selection of some of the solutions I found on around the web.

Hide columns

Stewart Curry

If your table is very wide you can choose to only show the important columns of your table on devices with smaller screens.

Select columns

The Filament Group

On smaller screens show fewer columns, but give your users an option to choose which columns they want to view.

Pie chart

Scott Jehl

On smaller screens convert the data in your table into a pie chart. Providing the data in your table allows this conversion then this is a nice solution.

Stretch it

CSS-Tricks

Turn each row in your table into its own cell and tile them underneath each other.

All these solutions are brilliant, but to me they only work for data tables which are row based - meaning that the information in each column on the same row makes up one set of data. If that's the kind of table you have, any of the above solutions will work fine.

But recently I had to code a data table for a client which was column based where all the information on each row in the same column makes up one set of data. It was a table with different price packages (listed as columns) and features within those packages (listed as rows). You can see the result on the Textile Deli custom iPad and MacBook cases page (Textile Deli is no longer trading).

Based on the options above I decided that the stretchy table from CSS Tricks would be the most suitable for my purposes. But that method doesn't work very well in IE9 and IE10. The solution from CSS Tricks is to use conditional comments to hide the media queries for Internet Explorer. Now I don't mind leaving IE6 and IE7 behind, and if IE8 has issues with things then a fallback is OK, but surely with IE9 and IE10 things shouldn't be left like this.

My first attempt to create a row based table according to CSS Tricks instructions worked fine in Chrome, Firefox, Opera and Safari, whatever width you set the browser at. But as expected IE9 wasn't playing ball.

According to CSS-Tricks the mangling happens because IE9 and IE10 don't like table elements to be set as display:block.

Usually when I am stuck on something (HTML, CSS, WordPress, an idea of what to do with the green tomatoes from the garden) I search the web, and so I did for this too.

I came across a Stackoverflow question on this problem in IE. Playing with the solution given I found that keeping display:block but adding

width: 100%;
float: left;

to tr and td elements did the trick in IE9 without upsetting Chrome, Firefox, Opera and Safari.

But I began this quest to find a way to have a responsive table that was column based. Fortunately using the same principle and some rejigging did the trick. And here they are: two tables with the same information, but arranged differently. Just to prove it looks fine in IE9 both narrow and wide I am giving you IE9 screenshots.

If you want to look at the code, or play with your browser window until the cows come home, you can do so on the demo page.

View demo