小编典典

使DIV填充整个表格单元格

css

我已经看过这个问题并在Google上搜索了一下,但到目前为止没有任何效果。我认为现在是2010年(这些问题/答案很旧,而且还没有答案),我们有了CSS3!有什么方法可以使用CSS使div填充整个表格单元格的宽度和高度吗?

我不知道单元格的宽度和/或高度会提前多少,并且将div的宽度和高度设置为100%无效。

另外,我需要div的原因是因为我需要将某些元素绝对定位在单元格之外,并且position:relative不适用于tds,因此需要包装div。


阅读 429

收藏
2020-05-16

共1个答案

小编典典

以下代码适用于IE 8,IE 8的IE 7兼容模式和Chrome(未经其他地方测试):

<table style="width:100px"> <!-- Not actually necessary; just makes the example text shorter -->
   <tr><td>test</td><td>test</td></tr>
   <tr>
      <td style="padding:0;">
         <div style="height:100%; width:100%; background-color:#abc; position:relative;">
            <img style="left:90px; position:absolute;" src="../Content/Images/attachment.png"/>
            test of really long content that causes the height of the cell to increase dynamically
         </div>
      </td>
      <td>test</td>
   </tr>
</table>

你在你原来的问题时说,制定widthheight100%没有工作,虽然,这使我怀疑,有一些规则覆盖它。您是否在Chrome或Firebug中检查了计算样式,以查看宽度/高度规则是否真正应用了?

编辑

我真愚蠢!的div大小是根据文字确定的,而不是td。您可以通过制作来在Chrome上解决此问题div display:inline-block,但在IE上则无法使用。事实证明这比较棘手…

2020-05-16