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?

.. what? `table-caption` renders it like a `` element (which is displayed vertically). `table-cell` is like a `` element (which is displayed horizontally). — MortenMoulder, Mar 12 '16 at 13:14
and should be only one table-caption per container ..., just use display:block here :) i do not see the point, unless more code is missing — G-Cyrillus, Mar 12 '16 at 13:21
@Harry I know :) Double style quotes are the most common in HTML, but single style can also be used. This is written on http://www.w3schools.com/html/html_attributes.asp this page. so for I changed the single quote to double quote. :) By the way the main point is there is no difference. :) — Hamza Zafeer, Mar 12 '16 at 14:25

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

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.

**Did you notice in FF that only 1 boxe is shown** ...all 4 stack on top of each other ;) https://jsfiddle.net/qustLsdz/ — G-Cyrillus, Mar 12 '16 at 13:40

score 0 · Answer 2 · edited Apr 23 '21 at 12:58

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

Would you mind expanding your answer to include an explanation of the code snippet you included? — Matthew Morek, Apr 22 '21 at 21:21

CSS display table-caption causes vertical layout

2 Answers2