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

【问题标题】：Setting height on TR is different from height on TD. Why?TR 上的设置高度与 TD 上的高度不同。为什么？
【发布时间】：2017-08-01 13:27:21
【问题描述】：

我不明白这两段 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。

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

【问题讨论】：

标签： html html-table height tr

【解决方案1】：

您将height: 100% 用于<div>，但未指定父级<td> 的高度。如果没有明确指定包含块的高度（即，它取决于内容高度），并且该元素不是绝对定位的，则使用的高度计算为好像指定了“自动”。

css spec about height calculation

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：