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

is there can make ie display table cells actual blocks?

given style:

table,tbody,tr,td,div {   display: block;   border: 1px solid #0f0;   padding: 4px; } 

and 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 same nested divs in both firefox , safari/chrome. in internet explorer (8) property display: block has no effect. table renders if don't set property.

my main problem cells don't break; render on 1 line. (the tbody , tr elements don't borders nor padding. not problem me right now, though.)

i haven't found information on problem when searching. compatibility charts on quirksmode , elsewhere states ie supports display: block since v. 5.5. discussion on table display problems seems when doing reverse - giving non-table elements of display: table-* properties.

so once again, there can make ie render table cells block?

(the real table table, tabular data. keep way, , restyle unobtrusively.)

i applied float: left stuff. kinda works.

live demo

the biggest problem width: 100% combined padding making things wide.

so:
live demo (without problematic padding)

that looks bit better, i'm not sure how can add padding everywhere if need it.

---

this fails --> miserably <-- in ie7 (it won't on fact it's <table>), , if don't care ie7, need tweaking use case (if it's usable @ all).

ie7: