html - border-collapse 组合 :collapse and 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

The border-collapse CSS property determines whether a table's borders are separated or collapsed. In the separated model, adjacent cells each have their own distinct borders. In the collapsed model, adjacent table cells share borders.

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

In the collapsing border model, borders at every edge of every cell may be specified by border properties on a variety of elements that meet at that edge (cells, rows, row groups, columns, column groups, and the table itself)

这就是为什么当您平移单元格时，只有单元格会移动，因为它们没有自己的边框并且只共享边缘元素(即表格)的边框。

如果你真的真的需要转换和移动第 th 个单元格，那么将 border-collapse 保持为 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>