Как убрать дерганье с таблицы при клике?

Question

[string15]

Привет!
Клик
1. Как сделать чтобы не дергались ячейки таблицы при клике и наведении?
2. Как сделать чтобы поле ID при клике было шириной как изначально?
3. Что можно переписать в этом коде, я еще новичок, но я понимаю что он ужасно написан?

Спасибо!

Answer 1

[Александр Аксентьев]

outline вместо border использовать.

table.setAttribute('outline', '1');

border меняет размер жлемента

Answer 2

[vaskadogana]

они дергаются из-за изминения размера бордера, считай ширины и высоты ячейки
вариант 1: поместить содержимое ячейки в контейнер с border transparent сразу, а при ховере/клике менять только цвет

нормальный вариант только 1)
остальное хлопотно и не кроссбраузерно

Answer 3

[Ankhena]

1. При наведении вместо border использовать outline или box-shadox (можно внутренюю).
2. Вместо input использовать атирибут contenteditable="true" https://jsfiddle.net/qnbzbL0p/

Comments

[string15]

Спасибо, про этот атрибут не знал

[Ankhena]

string15: не за что, пробуйте :)