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

Question

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.)

Answer 1

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: