爲什麼css表格只在其行周圍繪製邊框，而不在邊框內包含表格標題？

在CSS表，我注意到，如果我添加一個邊框display: table;元素，只汲取周圍的一切display: table-row;節點邊界，但不在身邊display: table-caption;元素，即使表字幕節點是display: table;的孩子。它爲什麼這樣做？爲什麼css表格只在其行周圍繪製邊框，而不在邊框內包含表格標題？

如何讓它在整個桌子周圍繪製邊框（即在邊框內包含表格標題）？

我創建了一個小提琴證明了這一點：https://jsfiddle.net/9028hswc/

2016-03-09 codneto

因爲標題不是p數據的藝術，我會說... –

表標題不是表本身的一部分：http://stackoverflow.com/a/35543537/3597276 –

也要注意標題端的CSS規則:) https：///jsfiddle.net/9028hswc/1/（它的工作原理）所以邊界？ –

與CSS屬性display: table-caption表現得像<caption>元素的任何元素。

從MDN：

的HTML <caption>元素（或HTML表標題元素）表示表的標題。雖然它總是第一個後裔，但它的造型，使用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; 
}

2016-03-09 02:34:04

'caption {display：{}} display：inline-block;如果這就是他想要的，那麼''將它放在邊界內。 –

回答