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

DEMO：https://jsfiddle.net/4g2w420o/5/

Answer 2

试试这个，它是否正常JSFIDDLE

#container table {
    border-collapse: collapse;
}
#container table td {
    /*border: 2px solid white; I have commented this */
}
#container table tr:hover td {
    border-top: 2px solid #999;
    border-bottom: 2px solid #999;
}

Answer 3

这个怎么样？

https://jsfiddle.net/4g2w420o/6/

<div id="container">
<table>
    <tr><td>ABC</td><td>DEF</td></tr>
    <tr><td>ABC</td><td>DEF</td></tr>
    <tr><td>ABC</td><td>DEF</td></tr>
</table>
</div>

#container table {
    border-spacing: 0px;
    border-collapse: separate;
}
#container table tr td {
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
}
#container table tr:hover td {
    border-top: 2px solid #999;
    border-bottom: 2px solid #999;
}

表格行中的顶部和底部边框：仅设置底部边框的样式

3 个答案: