TR上的设置高度与TD上的高度不同。为什么？

问题描述：

我不明白这两个HTML片段之间的不同的行为：TR上的设置高度与TD上的高度不同。为什么？

<!DOCTYPE HTML><html><body> 
<TABLE style='border:1px solid black'> 
<TR> 
    <TD style='height:100px'><div style='width:100px;height:100%;background-color:#ccc'></div></TD> 
</TR> 
</TABLE> 
</body></html>

JFiddle：https://jsfiddle.net/ceyq6n10/

和

<!DOCTYPE HTML><html><body> 
<TABLE style='border:1px solid black'> 
<TR style='height:100px'> 
    <TD><div style='width:100px;height:100%;background-color:#ccc'></div></TD> 
</TR> 
</TABLE> 
</body></html>

JFiddle：https://jsfiddle.net/hmjvu5gf/

在第一个例子，DIV垂直扩展到TD高度的100％。在第二种情况下，即使TD具有正确的垂直尺寸，DIV的高度为0.

请您解释一下为什么？谢谢

答

您使用height: 100%为<div>，但没有指定高度父<td>。如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素没有绝对定位，则使用的高度计算为指定了'auto'。

css spec about height calculation

所以，当你使用％用于设置高度或宽度，始终设置父元素的宽度/高度为好。

答

通过调整单元格大小，我们可以控制行高。

答

您应该将这样的样式规则应用于容纳像文本或其他html一样的实际内容的容器。在这种情况下，你td是内容的实际容器。

对于tr标签，只能将tr或td放入tr中，而不是实际的内容。屏幕空间的样式适用于实际内容容器（如td，th）的标签，或者实际上它们本身可以占用屏幕空间。 tr是更多的行去标记。你可以将背景颜色这样的东西应用于tr，它可以用于td。将屏幕空间规则应用于更具体的内容容器。

TR上的设置高度与TD上的高度不同。为什么？

相关推荐