Question

In WebKit, Firefox and Opera, you can set the various table elements to display: block to stop them displaying like tables:

• http://jsfiddle.net/bHzsC/

This can be useful on smaller screens (e.g. iPhones) that don’t have room to display tables laid out traditionally.

IE 9, however, still lays out the table cells next to each other horizontally — it doesn’t seem to honour display: block on the table elements.

Is there any other code that will stop IE 9 (or earlier) from laying out tables as tables?

Answer 1

Adding float:left;clear:left; will make IE 9 behave a bit better, but the width of each element will not be correct. If you add width:100% to the mix, it seems to behave the same as in Chrome and Firefox.

table,
thead,
tfoot,
tbody,
tr,
th,
td {
    display:block;
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float:left;
    clear:left;
}

Edit: This has been asked before How can I make "display: block" work on a <td> in IE? and partially covered on How can I get inline-block to render consistently when applied to table cells? which quite rightly mention that any padding will cause the width:100% to create a horizontal scrollbar. However, this can be avoided with box-sizing:border-box;, or by using a suitably lower width or containing element with a fixed width.