How can I make "display: block" work on a <td> in IE?
css, html, internet-explorer, internet-explorer-8
Solution
I applied `float: left` to stuff. It kinda works.
Live Demo
The biggest problem is `width: 100%` combined with the `padding` is making things too wide.
So: Live Demo (without the problematic `padding`)
That looks a bit better, but I'm not sure how you can easily add `padding` everywhere if you need it.
This fails --> miserably <-- in IE7 (it just won't get over the fact that it's a `<table>`), and even if you don't care about IE7, it will need tweaking for your use case (if it's usable at all).
IE7:
Problem
Is there anything I can do to make IE display table cells as actual blocks? Given this style: ``` table,tbody,tr,td,div { display: block; border: 1px solid #0f0; padding: 4px; } ``` And this html: ``` <table> <tbody> <tr> <td>R1C1</td> <td>R1C2</td> <td>R1C3</td> </tr> </tbody> </table> <div> <div> <div> <div>R1C1</div> <div>R1C2</div> <div>R1C3</div> </div> </div> </div> ``` The table renders exactly the same as the nested divs in both Firefox and Safari/Chrome. But in Internet Explorer (8) the property `display: block` has no effect. The table renders exactly as if I don't set that property. My main problem is that the cells don't break; They all render on one line. (The `tbody` and `tr` elements don't get any borders nor padding. That is not a problem for me right now, though.) I haven't found any information on the problem when searching. Compatibility charts on quirksmode and elsewhere states that IE supports `display: block` since v. 5.5. Any discussion on table display problems seems to be when doing the reverse - giving non-table elements any of the `display: table-*` properties. So once again, is there anything I can do to make IE render table cells as block? (The real table is really a table, with tabular data. I would like to keep it that way, and restyle it unobtrusively.)