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

Question

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

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

Представьте себе стандартный HTML-код таблицыНекоторые tr с некоторыми td.При наведении курсора на строку следует выделить ее границу красным цветом.

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>

Answer 1

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

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

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

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

Answer 2

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

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

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

Answer 3

Просто вставьте этот код в ваш головной раздел:

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

Answer 4

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