Строка таблицы строк при наведении

Я пытаюсь выделить границу строки таблицы при наведении. К сожалению, это работает только для первой строки ячеек. Нижние строки имеют одну границу, которая не меняет цвет. Я попытался использовать outline, но он не играет хорошо с :hover в webkit.

http://jsfiddle.net/S9pkM/2/

Представьте себе стандартную таблицу html. Некоторые tr с некоторыми td's. Наведение курсора над строкой должно быть выделено красным цветом.

table { border-collapse: collapse; } /*I am aware of separate */
table td { border: 3px solid black; }
table tr:hover td { border-top-color: red; border-bottom-color: red; }
table tr:hover td:first-child { border-left-color: red; }
table tr:hover td:last-child  { border-right-color: red; }

Я открыт для альтернативных подходов, но я застрял в структуре таблицы. Без добавления дополнительного html, кроме стандартного <table> <tr> <td>

Ответ 1

Я столкнулся с этой же проблемой и, наконец, нашел более простое решение здесь.

Вы можете использовать этот трюк CSS (border-style: double;), который работает для границ 1px:

#mytable tr.row:hover td
{
    border-style: double;
    border-color: red;
}

Это заставит ваш border-color работать (быть самым верхним), несмотря ни на что.: -)

Ответ 2

Для границ 1px см. решение Leniel, использующее border-style: double. Это намного проще. Двойная граница - это та, которая показывает линию 1px для внутренних и внешних границ границы. Это не делает ничего для границы 1px, но нa > 1px есть пробел.

Для границ > 1px вы удаляете нижнюю границу для всех <td> с помощью border-bottom: 0. Верхние границы других ячеек будут держать все в порядке, за исключением последней строки. Последняя строка, которую мы фиксируем с помощью tr:last-child td { border-bottom: your border style }. Наконец, в псевдо-слове hover вы устанавливаете нижнюю границу.

http://jsfiddle.net/S9pkM/16/

table { border-collapse: collapse; } /*I am aware of separate */
table td { border: 1px solid black; width: 50px; height: 25px; padding: 5px; border-bottom: 0; }
table tr:last-child td { border-bottom: 1px solid black; }
table tr:hover td { border-top-color: red; border-bottom: 1px solid red; }
table tr:hover td:first-child { border-left-color: red; }
table tr:hover td:last-child  { border-right-color: red; }

Ответ 3

почему бы не использовать отдельную границу? http://jsfiddle.net/S9pkM/6/

Ответ 4

Просто введите этот код в свой раздел:

<style>
  table td { border: 2px solid transparent; width: 50px; height: 50px; padding: 5px 5px 5px 5px;}
  table td:hover {border:2px solid red; }
</style>