Почему границы таблиц не сворачиваются при позиционировании заголовка?

Question

В этой скрипке http://jsfiddle.net/jnddfyeq/ У меня есть две таблицы с border-collapse: collapse. В первом все работает так, как ожидалось. Во втором я позиционирую caption с position: absolute, и теперь границы между thead и tbody не разрушаются.

Это происходит в Firefox 38 и IE8 (не в скрипке). Я не тестировал другие браузеры. Является ли это стандартом поведения? Если да, то почему?

ОБНОВЛЕНИЕ: То же самое происходит в Safari.

Answer 1

Это не значит, что borders не collapse. Похоже, что происходит то, что даже если отображается caption из table, все еще остается невидимое cell, добавленное к table.

В спецификации упоминается, что это может произойти, не совсем ясно, что должно произойти в этом случае, но ясно, что таблица следует довольно строгой структуре компоновки и что она будет компенсировать фоновый эффект при взаимодействии с этим макетом. См.:

Примечание. Позиционирование и перемещение ячеек таблицы может привести к тому, что они больше не будут табличных ячеек в соответствии с правилами раздела 9.7. Когда используется значение , правила для анонимных объектов таблицы могут также создавать объект анонимной ячейки .

Здесь: http://www.w3.org/TR/CSS2/tables.html#table-layout

Если посмотреть на вычисленного стиль вашего absolute caption вы увидите, что это не cell больше, так что, вероятно, заменен anonymous cell. И я предполагаю, что с table head всегда находятся в верхней части по определению, это anonymous cell размещается автоматически под ним, в table body group. Если вы установите координаты на 0, вы увидите, где именно она заканчивается. И если вы играете с границами, вы также увидите, что происходит.

См сниппет:

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>