为什么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美分时，以下是您获取所有内容边框的方式：https://jsfiddle.net/25zwopqr/

<强>的变化：

HTML

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

CSS

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