桌子边框垂直和水平不相交

Question

我有一个简单的表格，我只是想在某些单元格周围设置边框。

 .comments .b { border-bottom: 1px solid #919295; } .comments .t { border-top: 1px solid #919295; } .comments .l { border-left: 1px solid #919295; } .comments .r { border-right: 1px solid #919295; } 

 <table align='center' width='100%' class='comments'> <tr> <th width='15%' class='r b'>val</th> <th width='45%'>ba</th> <th width='40%'>"sadf</th> </tr> <tr> <th width='15%' class='r b'>"dsf</th> <th rowspan='2' colspan='2'>"sdf</th> </tr> <tr height='60px'><th colspan='3'>&nbsp;</th></tr> <tr height='35px'><th>&nbsp;</th><th colspan='2'>&nbsp;</th></tr> </table> 

结果是：

如何删除箭头所示的空格？

我尝试过border-spacing: 0px;

Answer 1

加

table {
  border-collapse: collapse;
}