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

在折叠边框模型中，每个单元格的每个边缘都有边框可以由各种元素上的border属性指定在那边（单元格，行，行组，列，列组，和表格本身）

这就是为什么在翻译单元格时，只有单元格会移动，因为它们没有自己的边框，只共享边缘元素的边框（即表格）。

如果您确实需要转换并移动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>

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

1 个答案: