我的表格有以下 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 的评论:为了防止单元格边框渗入表格边框,我们需要执行以下操作:
移除
border-collapse:collapse
。这就是使边界结合在一起导致出血效果的原因。将内边框放在单元格 (
td
) 而不是行 (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;
}
这是 fiddle 的更新版本:http://jsfiddle.net/T5TGN/2/
关于css - 我的 tr 边框覆盖表格边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17084602/