你可以使IE 9（或更早版本）布局表元素，就像他们是正常显示：块元素？ [英] Can you make IE 9 (or earlier) lay out table elements as if they were regular display:block elements?

问题描述

在WebKit，Firefox和Opera中，您可以将各种表格元素设置为 display：block ，以阻止它们像表格一样显示：

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/

• http://jsfiddle.net/bHzsC/

这在没有空间显示传统的表格的较小屏幕（例如iPhone）上非常有用。

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

IE 9，但是，仍然水平放置表格单元格 - 它似乎不支持表元素 display：block 。

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.

有没有其他代码会阻止IE 9（或更早版本）将表格布置为表格？

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

推荐答案

添加 float：left; clear：left; 会使IE 9表现更好一些，但每个元素的宽度不正确。如果您在组合中添加 width：100％，它的行为方式与Chrome和Firefox中的相同。

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;
}

修改：如何使display：block工作在< td>在IE？，部分覆盖在当应用于表格单元格时，如何让inline-block始终如一地渲染？这里提到任何填充将导致 width：100％创建一个水平滚动条。但是， box-sizing：border-box; 可以避免这种情况，也可以使用适当的较低宽度或包含固定宽度的元素。

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.

这篇关于你可以使IE 9（或更早版本）布局表元素，就像他们是正常显示：块元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！