我的表有以下CSS：
table{
border: 1px solid black;
border-collapse: collapse;
}
tr{
border-bottom: 1px solid #a2a2a2;
}
我希望我的桌子有一个黑色边框和内部,该线应该用灰色边框分隔.然而,表的底部边框被tr覆盖,并且是灰色而不是黑色.
如何设置优先于tr边框的表格边框？
解决方法
将底部边框移动到tr的顶部,并将第一个tr设置为没有边框：
table{
border: 1px solid black;
border-collapse: collapse;
}
tr{
border-top: 1px solid #a2a2a2;
}
tr:first-child{
border:none;
}
jsFiddle to demonstrate it working(略微修改边框颜色和大小,以帮助它们在演示中更好地显示)
请注意,此解决方案涉及的CSS代码比其他有效解决方案略多,但具有更好的浏览器兼容性的优势. (：first-child是CSS2,而：last-child是CSS3)
[编辑]
根据OP的评论如下：为防止单元格边框流入表格边框,我们需要执行以下操作：
>删除边框折叠：折叠.这就是使边界结合在一起导致出血效果的原因.
>将内边框放在单元格(td)而不是行(tr)上.这是必要的,因为没有边界崩溃,我们不能在tr上有边界.
>向表中添加边距：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/
