Верхняя и нижняя границы в строке таблицы: только нижняя граница стилизованных

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