标记：
<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,一切正常.
这是一个错误,还是任何人都可以解释这种行为？
解决方法
从这个参考：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.
从这个规范：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)
这就是为什么在翻译单元格时,只有单元格会移动,因为它们没有自己的边框,只共享边缘元素(即表格)的边框.
如果你真的需要转换并移动第三个单元格,那么将边框折叠保持为独立并单独控制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>
