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

Question

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

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

我创建了一个 fiddle 来证明这一点:https://jsfiddle.net/9028hswc/

Answer 1

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

来自 MDN :

The HTML <caption> Element (or HTML Table Caption Element) represents the title of a table. Though it is always the first descendant of a , its styling, using CSS, may place it elsewhere, relative to the table.

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

正如 2-cents 在评论中提到的，这里是您如何在所有内容周围设置边框:https://jsfiddle.net/25zwopqr/

变化:

HTML

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

CSS

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