Question

我可以做些什么来使IE显示表格单元格成为实际的块？

鉴于这种风格：

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

这个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>

该表格与Firefox和Safari / Chrome中的嵌套div完全相同。但在Internet Explorer（8）中，属性display: block无效。该表完全呈现，就像我没有设置该属性一样。

我的主要问题是细胞不会破裂;它们全部呈现在一条线上。（tbody和tr元素没有任何边框也没有填充。不过，这对我来说不是问题。）

搜索时我没有找到有关此问题的任何信息。兼容性图表on quirksmode和其他地方声明IE支持display: block，因为v.5.5。关于表显示问题的任何讨论似乎都是在做反向时 - 为非表元素提供任何display: table-*属性。

再一次，有什么办法可以让IE渲染表格单元格成块吗？

（真正的表格实际上是一个表格，带有表格数据。我希望保持这种方式，并且不显眼地重复它。）

Answer 1

我将float: left应用于 stuff 。它有点工作。

Live Demo

最大的问题是width: 100%加上padding会让事情变得太宽。

所以：
Live Demo (without the problematic padding)

看起来好一点，但我不确定如果你需要，你可以在任何地方轻松添加padding。

这失败了 - ＆gt; 悲惨地＆lt; - 在IE7中（它只是不会克服它是<table>的事实），即使你不关心IE7，它也需要调整你的用例（如果它可以使用的话）。

<强> IE7：

enter image description here

Answer 2

以下为IE6 +工作：


tr {
  display: block;
  position: relative
}

td.col1 {
  display: block;
  left: 0;
  top: 0;
  height: 90px;
}

td.col2 {
  display: block;
  position: absolute;
  left: 0;
  top: 30px;
}

td.col3 {
  display: block;
  position: absolute;
  left: 0;
  top: 60px;
}

假设：

细胞高度30px

缺点：

固定的单元格高度
top属性的繁琐规范（可能生成）
仅在HTML为列提供类

优势：

适用于所有浏览器。

何时使用：

如果您无法控制HTML，但可以控制CSS。一些托管支付解决方案可以在IFRAME中显示并提供自定义样式表。

Answer 3

刚刚和我的同事一起弄清楚了。

我强烈建议不要在任何时候支持IE8！ 由于您正在促进使用不符合当前标准和技术的不受支持且当前不安全的产品。 最好告诉用户升级并为他们提供一些浏览器下载链接以供选择。

话虽如此。下面的CSS是您在Internet Explorer 8中修复它所需的最小css。

table {
   width: 100%;
 }
 td {
   float: left;
   width: 100%;
 }

<table>
  <tbody>
    <tr>
      <td>cell-1</td>
      <td>cell-2</td>
    </tr>
  </tbody>
</table>

Answer 4

添加以下代码：

<!DOCTYPE html>

我这里是这么解决的，加上上面那条声明语句，显示：块对TD就会有效

您需要在顶部添加此代码。

<!DOCTYPE html>
<html>
<head>
    <style>
        td {
            display: block;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>First Name</td>
                <td>Last Name</td>
                <td>Job Title</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><div>James</div></td>
                <td><div>Matman</div></td>
                <td><div>Chief Sandwich Eater</div></td>
            </tr>
            <tr>
                <td><div>The</div></td>
                <td><div>Tick</div></td>
                <td><div>Crimefighter Sorta</div></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

在顶部添加这行代码，但使用'float'和'width'非常好。抱歉，我的英语太差了。

Answer 5

设为display:table-row;而不是display:block 它会像预期的那样工作

如何让IE中的“display：block”工作？

5 个答案: