Question

I’ve got a table where I’m using the CSS display property to alter the layout. For full size browsers I use “block” and for smaller ones I use “table-cell”.
It works great in Firefox, Safari and Chrome, but somehow IE9 seems to mess it up of course…
When I debug the page using Firebug and the likes, it’s clear that all browsers except IE change the display:table-cell to display:block. But IE is stuck with display:block even though the CSS file clearly states it should be table-cell.

Is there any known issues with “table-cell” in IE9 or any known work arounds?

EDIT:
The issue is not with table-cell, it’s with Display:block on a table cell.

The problem I’m having can be found here: http://css-tricks.com/examples/ResponsiveTables/responsive.php
Open in Chrome/Firefox and resize browser window – the table is responsive and changes to a narrow design.
Open in IE9 and resize – the table is static and does not change.

EDIT2:
In the previous example the responsive part is commented out for IE, because the creator knew that it would be messy. Nevertheless, I want to be able to create this kind of design that works in IE as well, so I need to make some kind of workaround for it to make it work.

Here is a JSFiddle that shows how IE9 messes up the responsive table when reponsive part is included: http://jsfiddle.net/2Mt37/

Answer 1

I found the answer from an old thread, where @thirtydot wrote

I applied float: left to stuff. It kinda works.

How can I make "display: block" work on a <td> in IE?

As he said, it kinda works… IE9 stops rendering stuff all crazy, but there’s still som aligning to do to make it look good.
But that answer is good enough, I can fix the rest myself…