我已经看过这个问题并在Google上搜索了一下,但到目前为止没有任何效果。我认为现在是2010年(这些问题/答案很旧,而且还没有答案),我们有了CSS3!有什么方法可以使用CSS使div填充整个表格单元格的宽度和高度吗?
我不知道单元格的宽度和/或高度会提前多少,并且将div的宽度和高度设置为100%无效。
另外,我需要div的原因是因为我需要将某些元素绝对定位在单元格之外,并且position:relative不适用于tds,因此需要包装div。
position:relative
td
以下代码适用于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>
你在你原来的问题时说,制定width并height以100%没有工作,虽然,这使我怀疑,有一些规则覆盖它。您是否在Chrome或Firebug中检查了计算样式,以查看宽度/高度规则是否真正应用了?
width
height
100%
我真愚蠢!的div大小是根据文字确定的,而不是td。您可以通过制作来在Chrome上解决此问题div display:inline-block,但在IE上则无法使用。事实证明这比较棘手…
div
display:inline-block