嵌套表格如何实现边框合并

最近做的项目中有大量表格展示数据的需求，而且还涉及到嵌套表格的情况，这时候就需要考虑如何实现边框合并的问题了。

# 表格的边框合并 table {

border-collapse: collapse;

}

td,

th {

border: 1px solid black;

padding: 10px 20px;

}

12345678我们可以使用上面的 CSS 来描绘表格的边框，而且相邻两个单元格共享同一个边框。但是如果我们在表格中嵌套了另外一个表格，这时候就会出现边框重叠的问题。

# 嵌套表格的边框合并 针对嵌套表格会显示双重边框的问题，我们有两种解决方案，一种是父表格手动删除嵌套表格单元格的边框，另一种是让子表格的边框和父表格的边框重合。

第一个实现方式非常简单，只需要在父表格中删除嵌套表格单元格的边框即可，但是这样做会导致父表格的边框和子表格的边框不重合，而且视觉上不美观。

第二个实现方式需要在子表格中添加一些 CSS，让子表格的边框和父表格的边框重合。我们可以使用下面的 CSS 来实现：

table table {

width: calc(100% + 2px);

margin: -1px;

}

1234通过上面的 CSS，我们可以让子表格的边框和父表格的边框重合，这样就可以解决嵌套表格显示双重边框的问题了。

# 总结 视觉上让表格边框重合的方法本质上发挥想象力利用 margin 可以设置成负值，然后使用 calc 函数来计算宽度，这样就可以让子表格的边框和父表格的边框重合了。

# 参考 nested table with collapse border (opens new window)