边界崩溃的组合：崩溃和转换：翻译 [英] combination of border-collapse:collapse and transform:translate

问题描述

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

标记：

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

款式：

  table {
 border-spacing：0; 
 border-collapse：collapse; 
背景：#efefef; 
} 
 
 th {
 background：#ccc; 
 border-right：1px＃000 solid; 
 transform：translate（-10px，0）; 
} 
  

http://jsfiddle.net/rs0h9tbu/2

如果我将border-collapse更改为separate，一切正常。
这是一个错误，还是有人可以解释这种行为？

解决方案

这是折叠边框模型的行为。当 border-collapse 设置为 collapse 时，那么这些单元格与边缘元素的边界元素表。如果它被设置为单独的，那么单元格有自己的边界。 =https://developer.mozilla.org/en/docs/Web/CSS/border-collapse =noreferrer> https://developer.mozilla.org/en/docs/Web/CSS/border-折叠

border-collapse CSS属性确定表格的边界
是分隔还是折叠。在分离的模型中，相邻的单元格
每个都有自己独特的边界。在折叠模型中，相邻的
表格单元共享边界。 //www.w3.org/TR/CSS2/tables.html#border-conflict-resolutionrel =noreferrer> http://www.w3.org/TR/CSS2/tables.html#border-conflict-分辨率

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

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

b
$ b

如果您确实需要转换并移动 th 单元格，请保留 border-collapse 作为分开并控制 td / th in

类似这样的内容：

table {border -spacing：0px; border：1px solid＃333;背景：#efefef; border-collapse：separate;} th，td {border：1px solid＃333; } td {border-right：0px; } td：first-child {border-left：0px; } tbody> tr：最后一个孩子> td {border-bottom：0px; } th {background：#ccc; transform：translate（50px，50px）; }

< table> < THEAD> < TR>第一次测试1 /第二次测试第二次测试第二次测试第三次测试第三次测试< / TR> < / THEAD> < TBODY> < TR> < TD> asdasd< / TD> < TD> adasdasd< / TD> < TD> adasdasd< / TD> < / TR> < / tbody>< / table>




I have the following problem: When I translate the header cells from a table and the table is set to border-collapse:collapse then the cells will be moved but not their borders. I created a test:

Markup:

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

Style:

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

If I change border-collapse to separat everything works fine. Is it a bug, or can anybody explain that behaviour?

解决方案

This is the behaviour of the collapsing border model. When border-collapse is set to collapse, then the cells share the border with that of the edge element which is the table. If it is set to separate, then the cells have their own border.

From this ref: 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.

And from this spec: 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)

This is why when you translate the cells, only the cells move because they are not having their own borders and only sharing the borders of the edge-element (i.e. table).

If you really really need to transform and move the th cells, then keep the border-collapse as separate and control the borders on td/th individually.

Something like this:

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>

这篇关于边界崩溃的组合：崩溃和转换：翻译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！