我的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;
}

这是小提琴的更新版本：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/

Answer 3

更新表css，如下所示

table, tr:last-child
{
  border: 1px solid black;
  border-collapse: collapse;
}

您可以查看Demo

Answer 4

尝试将填充底部添加到tr：

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