html - 表行 : only bottom border is styled 中的顶部和底部边框

Question

我正在使用以下 CSS 在当前悬停的表格行上实现突出显示效果:

#container table {
    border-collapse: collapse;
}
#container table td {
    border: 2px solid white;
}
#container table tr:hover td {
    border-top: 2px solid #999;
    border-bottom: 2px solid #999;
}

除了最上面的 tbody 行之外，只有底部边框的样式为 #999。顶行正确显示两个边框。看起来上一行的白色底部边框覆盖了悬停行的灰色顶部边框(在 FF 42 中测试)。有办法解决这个问题吗？

JSFiddle

Answer 1

试试这个:

#container table {
    border-collapse: collapse;
}
#container table td {
    border-top: 2px solid #FFF;   
}
#container table tr:hover td {
    border-top: 2px solid #999;
    border-bottom: 2px solid #999;
}

演示:https://jsfiddle.net/4g2w420o/5/