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

Question

In css tables, I am noticing that if I add a border to display: table; element, it only draws border around all display: table-row; nodes, but not around display: table-caption; element, even if the table-caption node is a child of the display: table;. Why does it do so?

How do I get it to draw border around whole table (i.e. include table-caption inside the border)?

I have created a fiddle to demonstrate the point: https://jsfiddle.net/9028hswc/

Answer 1

Any element with the CSS property display: table-caption behaves like a <caption> element.

From 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.

So, technically, it's not part of the table and that's why it is not inside the border.

As 2-cents mentions in the comment, here is how you get the border around all of the content: https://jsfiddle.net/25zwopqr/

Changes:

HTML

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

CSS

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