combination of border-collapse:collapse and transform:translate

Question

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?

Answer 1

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>