Html、css：表格上的双边框'；s行

我正试图“复制”这张桌子。
这是我的尝试
我的代码的问题在于，当您将鼠标悬停在

s上时，底部边框是双边框（从1向上翻2倍）
我尝试添加

边框塌陷：塌陷在我的代码中，并没有按照建议的堆栈溢出修复它。

也许我做错了。

有人能试着让它工作吗

我已将所有重要的.css行放在前63行

注意：我使用的是DataTables
Grooveshark不使用表布局，它们的每一行都有一个
，顶部边距为
-1px
，所以悬停时它将与上面的行重叠

但是，您可以使用
元素+元素
相邻同级选择器来实现相同的功能。首先，仅使用顶部边框，悬停时，使用“元素+元素”选择器更改下一行的边框颜色：

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

示例：
wow，非常感谢您提供的解决方案，您知道我如何才能在表格的最后一项添加边框吗？
table.dataTable tfoot tr td{border bottom:1px solid 35; dddddddddd；}
这不起作用请尝试
table.dataTable tbody tr:last child td
选择器，同时也更改hover上的边框颜色：
table.dataTable tbody tr:last child:hover td
我正在尝试第二种方法，使用div，我的行div是
table.dataTable.hover tbody tr.odd
table.dataTable.hover tbody tr.偶数

，我将尝试在那里添加一个上边距-1，我猜边框也必须转到div，因为它们不使用表，只使用简单的行。这样地：