如何在IE中的<td>上进行"display:block"工作?

Dan*_*iel 37 html css internet-explorer internet-explorer-8

有什么办法可以让IE显示表格单元格作为实际块吗?

鉴于这种风格:

table,tbody,tr,td,div {
  display: block;
  border: 1px solid #0f0;
  padding: 4px;
}
Run Code Online (Sandbox Code Playgroud)

这个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>
Run Code Online (Sandbox Code Playgroud)

该表呈现与Firefox和Safari/Chrome中的嵌套div完全相同.但在Internet Explorer(8)中,该属性display: block无效.该表呈现的方式与我没有设置该属性完全相同.

我的主要问题是细胞不会破裂; 它们全部呈现在一条线上.(tbodytr元素没有任何边界也没有填充.但是现在对我来说这不是问题.)

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

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

(真正的表格实际上是一个表格,包含表格数据.我希望保持这种方式,并且不显眼地重复它.)

thi*_*dot 38

我申请float: left东西.它有点工作.

现场演示

最大的问题是width: 100%padding过于宽泛的事情相结合.

所以:
现场演示(没有问题padding)

这看起来好一点,但我不确定padding如果你需要的话,你可以轻松地添加到处.


这在IE7中失败 - > 悲惨 < - 它只是不会克服它是一个事实,<table>即使你不关心IE7,它也需要调整你的用例(如果它可用于所有).

IE7:

在此输入图像描述

  • @Marcin:你需要更仔细地阅读这个问题.OP特别希望保留`table`标签,并重新设置它们:`"真正的表实际上是一个表,带有表格数据.我想保持这种方式,并且不显眼地重新设置它."`. (2认同)