Why are table borders not collapsing when caption is positioned?

Question

In this fiddle http://jsfiddle.net/jnddfyeq/ I have two tables with border-collapse: collapse. In the first one everything works as expected. In the second one I position the caption with position: absolute and now the borders between the thead and tbody do not collapse.

This happens in Firefox 38 and IE8 (not in a fiddle.) I have not tested other browsers. Is this behavior standard? If so why?

UPDATE: Same thing happens in Safari.

Answer 1

It's not really that the borders don't collapse. It seems that what's happening is that even if the caption is displayed out of the table, there is still an invisible cell being added to the table.

The specification mention that this can happen, it's not exactly clear what should happen in this case, but it's clear that a table follows a pretty strict layout structure and that it will compensate in the background when messing with that layout. See:

Note. Positioning and floating of table cells can cause them not to be table cells anymore, according to the rules in section 9.7. When floating is used, the rules on anonymous table objects may cause an anonymous cell object to be created as well.

Here: http://www.w3.org/TR/CSS2/tables.html#table-layout

If you look at the computed style of your absolute caption you'll see it's not a cell anymore, so it's probably replaced by an anonymous cell. And I guess that since table head are always at the top by definition, this anonymous cell is placed automatically below it, in the table body group. If you set coordinates to 0, you'll see exactly where it ends up. And if you play with borders, you'll see also what happens.

See snippet:

console.log('first caption:', window.getComputedStyle(document.getElementsByTagName('caption')[0]).display, '\nabsolute caption:',
window.getComputedStyle(document.getElementsByTagName('caption')[1]).display)

body
{
    margin: 0;
}

table {
    border-collapse: collapse;
    margin-bottom: 1em;
    border-spacing: 12px;
    background-color: yellow;
    margin-left: 0px;
}
th {
    
    padding: 0.5em;
    border: 10px dotted green;
    background: #8cf;
   
    
}
td {
    
    padding: 0.5em;
    border: 15px dotted red;
    background: #8cf;
   
    
}
caption.abs {
    position: absolute;
    left: 0; 
}
tr
{
    background-color: pink;
}
table.realnoncollapse {
    border-collapse: separate;
    margin-bottom: 1em;
    border-spacing: 12px;
    background-color: yellow;
    
}

<table>
    <caption>Chill Table</caption>
    <thead>
        <tr  id="tr1">
            <th>Chiller</th>
            <th>Chillness</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>The Dude</td>
            <td>Way chill</td>
        </tr>
        <tr>
            <td>This Guy</td>
            <td>Pretty chill</td>
        </tr>
    </tbody>
</table>
<table>
    <caption class="abs">No chill</caption>
     
    <thead>
        <tr >
            <th>Chiller</th>
            <th>Chillness</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>The Dude</td>
            <td>Way chill</td>
        </tr>
        <tr>
            <td>This Guy</td>
            <td>Pretty chill</td>
        </tr>
    </tbody>
</table>
<table class="realnoncollapse">
    
     <caption class="abs">No chill</caption>
    <thead>
        <tr >
            <th>Chiller</th>
            <th>Chillness</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>The Dude</td>
            <td>Way chill</td>
        </tr>
        <tr>
            <td>This Guy</td>
            <td>Pretty chill</td>
        </tr>
    </tbody>
</table>