为什么 css 表格只在其行周围绘制边框而不包括 table-caption 内部边框？

Question

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

如何让它围绕整个 table 绘制边框（即在边框内包含 table-caption）？

我创建了一个 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.

因此，从技术上讲，它不是 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;
}

为什么 css 表格只在其行周围绘制边框而不包括 table-caption 内部边框？

Why css tables only draw border around its rows and not include table-caption inside border?

css

css-tables