Как поправить табличку?

Question

[Mary Солнечная]

Добрый день. Имеется вот такая табличка
https://jsfiddle.net/dhjbop7e/
При наведении на строку у нее появляется бордер, что показывает что строка активна, но когда наводишь на остальные, таблица как-бы "прыгает" или "поджимается" из-за того, что когда наводишь то padding увеличен и он все отодвигает. Выглядит некрасиво, к тому же если будет следом за этой страницей еще страница, то тогда "прыгать" будет всё. Как исправить ситуацию? Может быть есть какое-нибудь решение в виде скрипта или все-таки нужно переверстать дивами? Заранее спасибо

Answer 1

[Евгений]

Можно сделать как-то так:
https://jsfiddle.net/mL8yuvw4/1/

Answer 2

[Snewer]

А какого поведения вы ожидаете, когда увеличиваете padding и размер border?

Comments

[Mary Солнечная]

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

[Snewer]

Mary Солнечная: зачем переверстывать? измените стили для hover — не меняйте размеры.

Answer 3

[Андрей Верх]

Можно использовать box-shadow, вместо border

Comments

[Андрей Верх]

Правда тут скорее всего по кроссбраузерности не всё гладко

[Mary Солнечная]

Так как подсвечивается строка таблицы - вряд ли box-shadow будет на таблице работать

[Андрей Верх]

Mary Солнечная: В FF точно работает

Answer 4

[Mary Солнечная]

Всем спасибо за помощь, поскольку все ответы как-то повлияли на решение. Было решено не менять размеры активной строки, а вместо бордера я подсветила outline и всё получилось :)