border-collapse的组合:collapse和transform:translate

Question

我有以下问题:当我从表中翻译标题单元格并将表格设置为border-collapse:collapse时,单元格将被移动但不会移动它们的边框.我创建了一个测试:

标记:

<table>
    <thead>
        <th>Test 1</th>
        <th>Test 2</th>
        <th>Test 3</th>
    </thead>
    <tbody>
        <tr>
            <td>asdasd</td>
            <td>adasdasd</td>
            <td>adasdasd</td>
        </tr>
    </tbody>
</table>

样式:

table{
    border-spacing: 0;
    border-collapse: collapse;
    background: #efefef;
}

th {
    background:#ccc;
    border-right: 1px #000 solid;
    transform: translate(-10px, 0);
}

http://jsfiddle.net/rs0h9tbu/2

如果我将border-collapse更改为separat,一切正常.这是一个错误,还是任何人都可以解释这种行为？

Answer 1

这是折叠边框模型的行为.当border-collapse设置为时collapse,则单元格与作为表格的边缘元素的边界共享边界.如果设置为separate,则单元格具有自己的边框.

从这个参考:https://developer.mozilla.org/en/docs/Web/CSS/border-collapse

border-collapse CSS属性确定表的边框是分开还是折叠.在分离的模型中,相邻的单元格各自具有不同的边界.在折叠模型中,相邻的表格单元共享边框.

从这个规范:http://www.w3.org/TR/CSS2/tables.html#border-conflict-resolution

在折叠边框模型中,每个单元格的每个边缘的边框可以由在该边缘处遇到的各种元素(单元格,行,行组,列,列组和表本身)上的边框属性指定.

这就是为什么当你翻译单元格时,只有单元格移动,因为它们没有自己的边框,只共享边元素(即表格)的边框.

如果你真的需要转换和移动th单元格,那么保持border-collapseas separate并控制td/ th单独控制边框.

像这样的东西:

table {
    border-spacing: 0px;
    border: 1px solid #333;
    background: #efefef;
    border-collapse: separate;
}

th,td { border: 1px solid #333; }
td { border-right: 0px; }
td:first-child { border-left: 0px; }
tbody > tr:last-child > td { border-bottom: 0px; }
th { background: #ccc; transform: translate(50px, 50px); }

<table>
    <thead>
        <tr>
            <th>Test 1</th>
            <th>Test 2</th>
            <th>Test 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>asdasd</td>
            <td>adasdasd</td>
            <td>adasdasd</td>
        </tr>
    </tbody>
</table>