html collapse不重叠,html – border-collapse的组合：collapse和transform：translate

这是折叠边框模型的行为.当border-collapse设置为折叠时,单元格将与作为表格的edge元素的边框共享边框.如果将其设置为分离,则单元格具有自己的边框.

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.

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); }

Test 1Test 2Test 3

asdasdadasdasdadasdasd