HTML，CSS : double border on table's rows

Question

我正在尝试“复制”http://grooveshark.com/#!/album/Halo+LP/5904939这张 table 就在这里。
这是我的尝试http://jsfiddle.net/d1zqsayh/25/
我的代码的问题在于，当您将鼠标悬停在 <tr> 上时，不知何故s 和底部边框是双倍的(从 1 向上 2px)
我尝试添加 border-collapse: collapse;在我的代码中并没有按照建议的堆栈溢出帖子修复它。
也许我做错了。
有人可以尝试使这项工作吗？
我已将所有重要的 .css 行放在前 63 行。

注意:我使用的是数据表

Answer 1

Grooveshark 不使用表格布局，他们有一个 <div>对于每行 -1px上边距，因此悬停时它将与上面的行重叠。

但是您可以使用 element+element adjacent sibling selector 实现相同的目的。首先，只使用顶部边框，悬停时，使用 element+element 选择器，更改下一行的边框颜色:

table.dataTable tbody tr td{
  border-top: 1px solid #dddddd;
}

table.dataTable tbody tr:hover td {
    border-top: 1px solid rgb(192, 220, 255);
}

table.dataTable tbody tr:hover + tr td {
    border-top: 1px solid rgb(192, 220, 255);
}

示例:http://jsfiddle.net/d1zqsayh/26/