为什么CSS表格只在其行周围绘制边框而不在边框内包含表格标题？

Question

在 css 表中，我注意到如果我向元素添加边框display: table;，它只会在所有节点周围绘制边框display: table-row;，而不是在元素周围绘制display: table-caption;边框，即使 table-caption 节点是display: table;. 为什么会这样呢？

如何让它在整个表格周围绘制边框（即在边框内包含表格标题）？

我创建了一个小提琴来演示这一点：https://jsfiddle.net/9028hswc/

Answer 1

任何具有 CSS 属性的元素都display: table-caption表现得像一个<caption>元素。

来自MDN：

HTML<caption>元素（或 HTML 表标题元素）表示表的标题。尽管它始终是 a 的第一个后代，但其使用 CSS 的样式可能会将其放置在相对于表格的其他位置。

因此，从技术上讲，它不是表格的一部分，这就是它不在边框内的原因。

正如 2-cents 在评论中提到的，以下是如何获取所有内容周围的边框： https: //jsfiddle.net/25zwopqr/

变化：

超文本标记语言

<caption class='table-caption-div'>People Names</caption>

CSS

.table-caption-div {
  display: inline-block;
  background-color: #cf0;
}