CSS显示表格标题导致垂直布局

Question

#container {
  width: 960px;
  height: 960px;
  background-color: #ccc;
}
.box {
  width: 300px;
  height: 300px;
  background-color: blue;
  display: table-caption;
  border: 0;
}

<div id='container'>
  <span class='box'>Content</span>
  <span class='box'>Content</span>
  <span class='box'>Content</span>
  <span class='box'>Content</span>
</div>

Table Caption Fiddle Demo

现在，当我将table-caption更改为table-cell时，它会水平渲染。下面是它的演示。

Table Cell Fiddle Demo

不同渲染的任何原因？

Answer 1

以下是关于display: table-caption的规范：

  

表格标题（在HTML：CAPTION中）

     

指定表格的标题。所有带有＆＃39;显示的元素：table-caption＆＃39;必须如第17.4节所述进行渲染。

以下是关于字幕框渲染的section 17.4所说的内容：

  

标题框是块级框，它们保留自己的内容，填充，边距和边框区域，并且在表格封装内 呈现为正常的块框 框。

     

关键部分是它们被渲染为普通的块框，因此它们中的每一个都显示在另一个之下（如在它们自己的行中）。

需要注意的其他要点：（我在评论中与GCyrillus的讨论摘要）

• 如果孩子有display: table或display: table-cell，则不需要使用display: table-caption的父容器。您可以在this SO thread
中找到更多详细信息并参考规范的相关部分
• 理想情况下，每个表格只有一个字幕。用户代理可能不希望在同一个父/表下提供多个字幕，这可能解释了为什么Firefox呈现的方式与Chrome不同。但有关详细信息超出了这个答案的范围（在我看来），因为问题只是询问为什么显示：表格标题导致垂直布局。
• 我同意GCyrillus ，对同一父级下的多个元素使用display: table-caption绝对是不好的做法。我相信你在尝试学习时正在进行反复试验。

Answer 2

fork

.header{
  writing-mode: vertical-rl;
  padding-top: 30%;
  font-weight: bold;
  padding-right: 5px
}   
table,tr,td{
  border:1px solid black;
  border-collapse: collapse;
  padding: 5px;

}