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.

原文地址：https://www.jb51.cc/html/426586.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。