html – 为什么表格标题会增加表格的高度？

两个表的高度都设置为50px,其内容不会溢出.但是带有标题的表实际上是70px,因为标题似乎没有包含在表的高度计算中.

任何人都可以解释在计算表高度时不包括标题的理性吗？

毕竟,这是桌子的孩子.如果你想将它从表格高度中排除,如果你不想包含它,可以在表格外放置标题.

.table {
  display: table;
  height: 50px;
}
.table-caption {
  display: table-caption;
  background-color: red;
  height: 20px;
}
.table-row {
  display: table-row;
  background-color: green;
}
.table-cell {
  display: table-cell;
}

最佳答案

这是在17.4 Tables in the visual formatting model中解释的

the table generates a principal block Box called the table wrapper
Box that contains the table Box itself and any caption Boxes

也就是说,当你在带有display：table的元素上设置height：50px时,它适用于表格框本身,它不包括标题.

表格包装盒确实包含它,因此它的高度是表格盒子本身的高度(50px)加上标题的高度(20px),即70px.