使DIV填满整个表单元格 [英] Make a DIV fill an entire table cell
问题描述
我看过这个问题和 googled了一点儿,但没有到目前为止已经工作。我认为它现在是2010年(这些问题/答案是旧的,好,未回答),我们有CSS3!有什么方法可以使用CSS获得一个div来填充整个表格单元格的宽度和高度?
I've seen this question and googled a bit, but nothing so far has worked. I figure it's 2010 now (those questions/answers are old and, well, unanswered) and we have CSS3! Is there any way to get a div to fill an entire table cell's width and height using CSS?
我不知道单元格的宽度和/或高度将提前,并将div的宽度和高度设置为100%不起作用。
I don't know what the width and/or height of the cell will be ahead of time, and setting the div's width and height to 100% does not work.
此外,我需要div的原因是因为我需要绝对位置一些元素在单元格之外,而 position:relative
不适用于 td
s,因此我需要一个wrapper div 。
Also, the reason I need the div is because I need to absolutely position some elements outside of the cell, and position: relative
does not apply to td
s, so I need a wrapper div.
推荐答案
以下代码适用于IE 8,IE 8的IE 7兼容模式和Chrome / p>
The following code works on IE 8, IE 8's IE 7 compatibility mode, and Chrome (not tested elsewhere):
<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中检查计算的样式,看看是否真的应用了宽度/高度规则?
You said in your original question that setting width
and height
to 100%
didn't work, though, which makes me suspect that there is some other rule overriding it. Did you check the computed style in Chrome or Firebug to see if the width/height rules were really being applied?
我是多么的愚蠢! div
正在调整文本大小,而不是 td
。您可以通过使 div
display:inline-block
在Chrome上解决此问题,但它不适用于IE 。这证明很棘手...
How foolish I am! The div
was sizing to the text, not to the td
. You can fix this on Chrome by making the div
display:inline-block
, but it doesn't work on IE. That's proving trickier...
这篇关于使DIV填满整个表单元格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!