Html 边界折叠的组合：折叠和变换：平移

我有以下问题：当我从表格中转换标题单元格，并且表格设置为“边框折叠：折叠”时，单元格将移动，但不会移动其边框。我创建了一个测试：

标记：

<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>

如果我将“边界塌陷”更改为“分隔”，则一切正常。

---

这是一个bug，或者有人能解释这种行为吗？

这是正在崩溃的边界模型的行为。当

border collapse

设置为

collapse

时，单元格与作为表格的边缘元素的边框共享边框。如果将其设置为分离，则单元格有自己的边框

从本参考文件：

边框折叠CSS属性确定表的边框是否 被分开或折叠。在分离模型中，相邻单元 每个国家都有自己独特的边界。在折叠模型中，相邻的 表格单元格共享边框

根据本规范：

在收拢边界模型中，每个单元的每个边上都有边界 可以由多种元素的边框属性指定 在该边缘（单元格、行、行组、列、列组、， （还有桌子本身）

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

如果确实需要变换和移动

th

单元格，则将

边框折叠保持为
单独的
，并单独控制
td
/
th
上的边框

大概是这样的：


表格{
边界间距：0px；
边框：1px实心#333；
背景：#efef；
边界塌陷：分离；
}
th，td{边界：1px固体#333；}
td{右边框：0px；}
td:第一个子项{左边框：0px；}
tbody>tr:last child>td{border bottom:0px；}
th{background:#ccc；transform:translate（50px，50px）；}

测试1
测试2
测试3
asdasd
阿达斯达斯德
阿达斯达斯德
这是折叠边框模型的行为。当
border collapse
设置为
collapse
时，单元格与作为表格的边缘元素的边框共享边框。如果将其设置为分离，则单元格有自己的边框

从本参考文件：

边框折叠CSS属性确定表的边框是否
被分开或折叠。在分离模型中，相邻单元
每个国家都有自己独特的边界。在折叠模型中，相邻的
表格单元格共享边框

根据本规范：

在收拢边界模型中，每个单元的每个边上都有边界
可以由多种元素的边框属性指定
在该边缘（单元格、行、行组、列、列组、，
（还有桌子本身）

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

如果确实需要变换和移动
th
单元格，则将
边框折叠保持为
单独的
，并单独控制
td
/
th
上的边框

大概是这样的：


表格{
边界间距：0px；
边框：1px实心#333；
背景：#efef；
边界塌陷：分离；
}
th，td{边界：1px固体#333；}
td{右边框：0px；}
td:第一个子项{左边框：0px；}
tbody>tr:last child>td{border bottom:0px；}
th{background:#ccc；transform:translate（50px，50px）；}

测试1
测试2
测试3
asdasd
阿达斯达斯德
阿达斯达斯德
Hm。。。您是否希望左右边界也移动？可以说，这些边界实际上属于
表，而不是
th
。我认为使用边框折叠肯定会更好：分离并使用，例如，单元格的左边框和上边框，表格的右边框和下边框。在表格中使用
transform
的原因是什么…？@MrLister我在单元格上使用右边框，这就是我对行为感到困惑的原因。@something这里我需要对具有固定列和行的复杂表格进行转换。是的，我想您应该在这种情况下对表使用转换。我只是想知道在什么时候人们需要在表上进行转换，但是，嘿，这可能是一个很好的理由。还是个有趣的问题，别误会我。嗯。。。您是否希望左右边界也移动？可以说，这些边界实际上属于
表，而不是
th
。我认为使用边框折叠肯定会更好：分离并使用，例如，单元格的左边框和上边框，表格的右边框和下边框。在表格中使用
transform
的原因是什么…？@MrLister我在单元格上使用右边框，这就是我对行为感到困惑的原因。@something这里我需要对具有固定列和行的复杂表格进行转换。是的，我想您应该在这种情况下对表使用转换。我只是想知道在什么时候人们需要在表上进行转换，但是，嘿，这可能是一个很好的理由。还是一个有趣的问题，别误会我。谢谢，这是我想知道的。谢谢，这是我想知道的
table{
    border-spacing: 0;
    border-collapse: collapse;
    background: #efefef;
}

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