表格单元格高度如何计算？答案

【问题标题】：How is table cell height calculated?表格单元格高度如何计算？
【发布时间】：2014-02-09 16:05:59
【问题描述】：

在与 HTML 表格苦苦挣扎了几天后，我的前额出现了一个缩进网格，顺便说一句，这是我键盘的镜像。

说到网格，我想知道是否有任何关于<td> 大小的规则集。

都是按照内容来的吗？它是否受同一行中的其他单元格影响？按行本身？在桌子旁？普通的 CSS？

注意：我并不是专门寻找特定问题的答案。
我只想知道该死的高度是如何计算的，这样我每次都能弄清楚自己会发生什么。

【问题讨论】：

标签： html css rendering html-table

【解决方案1】：

是的表格单元格跟随内容及其兄弟高度。

你可以说它是一个分割成部分的矩形，无论它在里面是什么，它总是保持为一个矩形。

因此，即使您添加了 CSS 高度，如果文本大于 CSS 高度，它也会忽略它。

在大多数情况下，您几乎可以期待动态高度。

但仍然......它应该只用于显示表格数据而不是其他任何东西。剩下的就是display:table-cell;...

【讨论】：

【解决方案2】：

这是你可以玩的FIDDLE。

行样式在此设置中不起作用。

第一个 td 行：标准

第二个 td 行：给定一个高度 - 注意它会影响整个行

第三个 td 行：给定填充，再次影响整行

第四行：给定大字体

第五行：给定大字体和填充

CSS

table td {
    border: 1px solid black;
}
table tr:nth-child(2) td {
    height: 50px;
}
table tr:nth-child(3) td:first-child {
    padding: 10px;
}
table tr:nth-child(4) td:first-child{
    font-size: 34px;
}
table tr:nth-child(5) td:first-child{
    font-size: 34px;
    padding: 10px;
}

PS - 仅将表格用于“TABULAR”数据。

【讨论】：