html - 为什么放置标题时表格边框不会折叠？

Question

在这个 fiddle 中 http://jsfiddle.net/jnddfyeq/我有两个带有 border-collapse: collapse 的表格。在第一个中，一切都按预期工作。在第二个中，我将 caption 定位为 position: absolute ，现在 thead 和 tbody 之间的边界做不崩溃。

这发生在 Firefox 38 和 IE8 中(不是 fiddle )。我没有测试过其他浏览器。这种行为标准吗？如果是，为什么？

更新:同样的事情发生在 Safari 中。

Answer 1

borders 并不是真的collapse。看起来发生的事情是，即使 caption 显示在 table 之外，仍然有一个不可见的 cell 被添加到 表。

规范提到可能会发生这种情况，并不清楚在这种情况下应该发生什么，但很明显表格遵循非常严格的布局结构，并且当弄乱该布局时它会在后台进行补偿。见:

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.

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

如果您查看绝对标题 的计算样式，您会发现它不再是单元格，因此它可能被匿名单元格。而且我猜想因为 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>