我见过this question和googled a bit,但到目前为止还没有起作用。我认为现在已经是2010年了(这些问题/答案都很老了,而且,嗯,还没有答案),我们有了CSS3!有没有办法让div用CSS填充整个表单元格的宽度和高度?
我不知道单元格的宽度和/或高度会提前多少,并且将div的宽度和高度设置为100%是不起作用的。
另外,我需要div的原因是因为我需要绝对地将一些元素定位在单元格之外,而position: relative
不适用于td
s,所以我需要一个包装器div。
发布于 2010-07-10 03:17:44
以下代码适用于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中的计算样式,以查看是否真的应用了宽度/高度规则?
编辑
我是多么愚蠢啊!div
根据文本而不是td
调整大小。你可以通过制作div
display:inline-block
在Chrome上修复这个问题,但它在IE上不起作用。事实证明这更棘手..。
发布于 2013-01-05 02:51:12
如果您希望表格单元格内有100%div的原因是能够使背景颜色扩展到整个高度,但单元格之间仍有间距,则可以为<td>
本身提供背景色,并使用CSS边框间距属性来创建单元格之间的边距。
但是,如果你真的需要一个100%高度的div,那么就像这里的其他人提到的那样,你需要给<table>
分配一个固定的高度,或者使用Javascript。
发布于 2018-04-12 21:18:28
如果<table> <tr> <td> <div>
都设置了height: 100%;
,那么div将填充所有浏览器中的动态单元格高度。
https://stackoverflow.com/questions/3215553
复制相似问题