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

Question

我不明白这两部分之间的不同行为 HTML:

<!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.

你能解释一下为什么吗？谢谢

Answer 1

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

Answer 2

您应该将此类样式规则应用于包含实际内容（如文本或其他内容）的容器 html。在这种情况下，您 td 是内容的实际容器。

对于tr标签，只能将th或td放在tr中，不能包含实际内容。 Style for screen space 适用于作为实际内容容器的标签（如 td、th），或者实际上它们本身可以抓取屏幕 space。 tr 更像是行去标记。您可以将诸如背景颜色之类的东西应用到 tr，它将适用于 td。将屏幕 space 规则应用于更具体的内容容器。

Answer 3

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

css spec about height calculation

因此，当您使用 % 设置高度或宽度时，请务必同时设置父元素的 widths/heights。

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

Setting height on TR is different from height on TD. Why?

html

html-table

height

tr