我的tr边框覆盖表边框

Question

我的表有以下CSS:

table{
  border: 1px solid black;
  border-collapse: collapse;
}

tr{
    border-bottom: 1px solid #a2a2a2;
  }

我希望我的桌子有一个黑色边框和内部,该线应该用灰色边框分隔.然而,表的底部边框被tr覆盖,并且是灰色而不是黑色.

如何设置优先于tr边框的表格边框？

Answer 1

将底部边框移到顶部tr,然后将第一个设置为tr没有边框:

table{
  border: 1px solid black;
  border-collapse: collapse;
}

tr{
    border-top: 1px solid #a2a2a2;
}

tr:first-child{
    border:none;
}

jsFiddle演示它的工作原理(略微修改边框颜色和大小,以帮助它们在演示中更好地显示)

请注意,此解决方案涉及的CSS代码比其他有效解决方案略多,但具有更好的浏览器兼容性的优势.(:first-child是CSS2,而:last-childCSS3)

[编辑]

根据OP的评论如下:为防止单元格边框流入表格边框,我们需要执行以下操作:

• 删除border-collapse:collapse.这就是使边界结合在一起导致出血效果的原因.

• 将内边框放在cells(td)而不是rows(tr)上.这是必要的,因为没有border-collapse,我们不能有边界tr.

• 添加border-spacing:0到表中.这填补了td元素之间的空白,这些空白现在会出现,因为边界在它们上面而不是在边界上tr.

这是完成的代码:

table{
  border: 4px solid blue;
  border-spacing:0;
}

td{
    border-top: 4px solid red;
}

tr:first-child>td{
    border:none;
}

这里是小提琴的更新版本:http://jsfiddle.net/T5TGN/2/

Answer 2

使用:not(:last-child)

table{
 border: 1px solid black;
 border-collapse: collapse;
}

tr:not(:last-child){
 border-bottom: 1px solid #a2a2a2;
}

请参阅： http: //jsfiddle.net/JSWorld/QmuA9/1/