Сочетание пограничного коллапса: сбой и преобразование: перевод

У меня возникает следующая проблема: когда я перебираю ячейки заголовка из таблицы, а таблица имеет значение border-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 для разделения, все будет хорошо. Это ошибка, или кто-нибудь может объяснить это поведение?

Ответ 1

Это поведение модели сжимающейся границы. Если для параметра border-collapse установлено значение collapse, ячейки разделяют границу с элементом edge, который является таблицей. Если он установлен в separate, то ячейки имеют свою собственную границу.

Из этого ссылки: https://developer.mozilla.org/en/docs/Web/CSS/border-collapse

Свойство CSS с пограничным коллапсом определяет, будет ли граница таблицы разделяются или свертываются. В отдельной модели соседние ячейки каждый из них имеет свои собственные границы. В свернутой модели, смежной ячейки таблицы разделяют границы.

И из этой спецификации: http://www.w3.org/TR/CSS2/tables.html#border-conflict-resolution

В модели сжимающейся границы границы на каждом краю каждой ячейки могут быть заданы свойствами границы для множества элементов, которые встречаются на этом краю (ячейки, строки, группы строк, столбцы, группы столбцов, и самой таблицы)

Вот почему, когда вы переводите ячейки, перемещаются только ячейки, потому что они не имеют собственных границ и разделяют границы элемента edge (т.е. таблицы).

Если вам действительно нужно преобразовать и переместить ячейки 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>