css - 我的 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 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/