Why don't table borders collapse when positioning the header?
In this fiddle http://jsfiddle.net/jnddfyeq/ I have two tables with border-collapse: collapse
. In the first, everything works as expected. In the second, I position caption
with with position: absolute
, and now the boundaries between thead
and are tbody
not reset.
This happens in Firefox 38 and IE8 (not fiddle). I have not tested other browsers. Is this a standard of conduct? If so, why?
UPDATE: The same happens in Safari.
source to share
Not so that borders
not collapse
. What appears to be happening is that even if caption
displayed outside table
, table
an invisible is added cell
.
The spec mentions that this can happen, but it's not entirely clear what should happen in this case, but it's clear that the table follows a fairly strict layout structure and that it will compensate in the background when interacting with that layout. Cm:
Note. Positioning and moving table cells can result in them not being in accordance with the rules of section 9.7. when floating is used, the rules for anonymous table objects can be an anonymous cell object to be created.
Here: http://www.w3.org/TR/CSS2/tables.html#table-layout
If you look at the computed style of yours absolute caption
, you won't see it anymore cell
, so it will probably be replaced with anonymous cell
. And I believe that since table head
always by definition by definition, this is anonymous cell
set automatically under it in table body group
. If you set the coordinates to 0, you can see exactly where it ends. And if you play with borders, you will also see 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>
source to share