HTML，CSS，表格行上的双边框

Question

I am trying to "copy" http://grooveshark.com/#!/album/Halo+LP/5904939 this table right here.
This is my attempt http://jsfiddle.net/d1zqsayh/25/
Problem with my code is that somehow, when you hover over <tr> s and the bottom border is double (2px up from 1)
I tried adding border-collapse: collapse; in my code and didn't fix it as a stack overflow post suggested.
Maybe i am doing it wrong.
Can someone try and make this work ?
I have put all the important .css rows on the top 63 lines.

Note: I am using DataTables

Answer 1

Grooveshark does not use a table layout, they have a <div> for each row with -1px top margin, so on hover it will overlap the row above.

You can use however the element+element adjacent sibling selector to achieve the same thing. First, only use top borders and on hover, with the element+element selector, change the border color of the next row:

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

Example: http://jsfiddle.net/d1zqsayh/26/