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 来演示它的工作原理（稍微修改边框颜色和大小以帮助它们在演示中更好地显示）

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

[编辑]

根据下面的 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;
}

您可以查看演示

Answer 4

尝试将 padding-bottom 添加到 tr：

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