Question

Well the problem I hope is simple, table represents data and by hovering the td element I replace it with text input. The problem is that the input box has some default width and this makes the table flicker.

How to set the input box correctly with? Should I take the first td width size and simply set to the input box?

http://jsfiddle.net/staar2/Pufpq/2/

// A bit more better, fonts were different in input box and outside

http://jsfiddle.net/Pufpq/7/

// Remove outline
http://jsfiddle.net/Pufpq/8/

I think the problem is now found, when setting the text a bit bigger then the width the row scales bigger but the input box fits the text inside and does not change width.

Answer 1

Set a width to the td and the input inside the td make the flicker less obvious.

td {
padding: 5px; 
width:10px;    
}

td input {
    width:10px;
}