我的TR边框覆盖表格边框

我已经为我的桌子下面的CSS：我的TR边框覆盖表格边框

table{ 
    border: 1px solid black; 
    border-collapse: collapse; 
} 

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

我希望我的表有一个黑色的边框和内部线路都应该通过灰色边框隔开。然而，表格的底部边框被tr覆盖，并且是灰色而不是黑色。

我如何设法优先考虑tr边界的表格边界？

来源

2013-06-13 Syl

移动你的下边框顶端为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/

来源

2013-06-13 10:24:25 Spudley

我想没有办法阻止红色在蓝色之上（在你的jsFiddle中）。 – Syl

@Sylario - 是的，我会更新答案... – Spudley

哇，你知道你的CSS。谢谢！疯狂如何看起来容易需要一些技巧。 – Syl

使用: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/

来源

2013-06-13 10:23:20

+1正确。但请注意，这在旧版浏览器中不起作用（在IE8中不支持'：not'和'：last-child'，并且其他旧浏览器中缺少'：not'） – Spudley

尝试添加填充，底部到TR：

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

来源

2013-06-13 10:23:26 DaftDev

更新表CSS像下面

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

您可以检查Demo

来源

2013-06-13 10:48:58 spring

我的TR边框覆盖表格边框

回答

相关问题