嵌套表格如何实现边框合并
最近做的项目中有大量表格展示数据的需求，而且还涉及到嵌套表格的情况，这时候就需要考虑如何实现边框合并的问题了。
# 表格的边框合并
table {
border-collapse: collapse;
}
td,
th {
border: 1px solid black;
padding: 10px 20px;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
我们可以使用上面的 CSS 来描绘表格的边框，而且相邻两个单元格共享同一个边框。但是如果我们在表格中嵌套了另外一个表格，这时候就会出现边框重叠的问题。
# 嵌套表格的边框合并
针对嵌套表格会显示双重边框的问题，我们有两种解决方案，一种是父表格手动删除嵌套表格单元格的边框，另一种是让子表格的边框和父表格的边框重合。 第一个实现方式非常简单，只需要在父表格中删除嵌套表格单元格的边框即可，但是这样做会导致父表格的边框和子表格的边框不重合，而且视觉上不美观。 第二个实现方式需要在子表格中添加一些 CSS，让子表格的边框和父表格的边框重合。我们可以使用下面的 CSS 来实现：
table table {
width: calc(100% + 2px);
margin: -1px;
}
1
2
3
4
2
3
4
通过上面的 CSS，我们可以让子表格的边框和父表格的边框重合，这样就可以解决嵌套表格显示双重边框的问题了。
# 总结
视觉上让表格边框重合的方法本质上发挥想象力利用 margin 可以设置成负值，然后使用 calc 函数来计算宽度，这样就可以让子表格的边框和父表格的边框重合了。