CSS display table-caption causes vertical layout

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

Now when I change table-caption to table-cell it renders horizontally. Below is the demo of it.

Table Cell Fiddle Demo

Any reason for the different renderings?

Answer 1

Here is what the spec says about display: table-caption:

table-caption (In HTML: CAPTION)

Specifies a caption for the table. All elements with 'display: table-caption' must be rendered, as described in section 17.4.

And here is what the section 17.4 says about rendering of caption boxes:

The caption boxes are block-level boxes that retain their own content, padding, margin, and border areas, and are rendered as normal block boxes inside the table wrapper box.

The key part is that they are rendered as normal block boxes and hence each of them is displayed one below the other (as in, in their own row).

---

Other points to note: (A summary of my discussion with GCyrillus in comments)

• Parent container with display: table is not required for a child to have display: table-cell or display: table-caption. You can find more details and reference to the relevant part of the spec in this SO thread
• There should ideally be only one caption per table. User Agents probably don't expect multiple captions to be provided under the same parent/table and it probably explains why Firefox renders it differently from Chrome. But details on that are beyond the scope of this answer (in my opinion) as the question only asks why display: table-caption causes vertical layout.
• I concur with GCyrillus, it is definitely bad practice to use display: table-caption on multiple elements under the same parent. I believe you were doing trial and error in an attempt to learn.

Answer 2

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

}

<h1>Right Caption </h1>

<table> 
<tr>  
  <td>      
  <table>
    <tr> <th>SrNo.</th> <th>Name</th> <th>Department</th> </tr>
    <tr>
      <td>1</td>
      <td>Natasha</td>
      <td>IT</td>
          </tr>
              <tr>
            <td>1</td>
      <td>Umar</td>
      <td>IT</td>
          </tr>
              <tr>
            <td>1</td>
      <td>Usman</td>
      <td>BBA</td>
          </tr>

                <tr>
            <td>1</td>
      <td>Warda</td>
      <td>BBA</td>
    </tr>
  </table>
  </td>
   <td rowspan="5"  ><span class="header">Student Data</span> </td> 
   </tr>
</table>

<h1>Left Caption </h1>

<table> 
<tr>  
<td rowspan="5"  ><span class="header">Student Data</span> </td> 
  <td>      
  <table>
      <tr> <th>SrNo.</th> <th>Name</th> <th>Department</th> </tr>
          <tr>
            <td>1</td>
      <td>Natasha</td>
      <td>IT</td>
          </tr>
              <tr>
            <td>1</td>
      <td>Umar</td>
      <td>IT</td>
          </tr>
              <tr>
            <td>1</td>
      <td>Usman</td>
      <td>BBA</td>
          </tr>

                <tr>
            <td>1</td>
      <td>Warda</td>
      <td>BBA</td>
    </tr>
  </table>
  </td>
   </tr>
</table>