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

【问题标题】：Why are table borders not collapsing when caption is positioned?为什么放置标题时表格边框不会折叠？
【发布时间】：2015-09-12 12:12:58
【问题描述】：

在这个小提琴http://jsfiddle.net/jnddfyeq/ 中，我有两个带有border-collapse: collapse 的表。在第一个中，一切都按预期工作。在第二个中，我将caption 与position: absolute 定位在一起，现在thead 和tbody 之间的边界不会折叠。

这发生在 Firefox 38 和 IE8 中（不是在小提琴中。）我没有测试过其他浏览器。这是行为标准吗？如果有，为什么？

更新：Safari 中也会发生同样的事情。

【问题讨论】：

真的很有趣的发现。

标签： html css

【解决方案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，您将确切地看到它最终的位置。如果你玩边框，你也会看到会发生什么。

见sn-p：

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>

【讨论】：