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

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下方console.log('first caption:', window.getComputedStyle(document.getElementsByTagName('caption')[0]).display, '\nabsolute caption:', window.getComputedStyle(document.getElementsByTagName('caption')[1]).display)。如果将坐标设置为0，您将看到它到底的确切位置。如果你玩边框，你也会看到会发生什么。

请参阅代码段：

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>

Object obj1;

Why are table borders not collapsing when caption is positioned?

1 个答案: