HTML: When i hide a textbox in a Table, is it expected that the table reformats the space?

Question

Hi,

i have a input type=text in a table (in a TD actually) When a user clicks a checkbox, the input is hidden with Jquery (via the hide method) This makes the style of the input to "display:none;"

So far so good. Now, when that has happened, the row where the cell is in is shrunk (the height is lowered) because the only thing left in the row is a <span>, which height is lower than the input height. The net result of this is that the row gets smaller, and when you click the checkbox again the input re-appers and the row gets larger.

That doesn't look so nice, so i wondered if there was a way to prevent this?

And second: is this the way it should work (the table resizing)?

Answer 1

Try setting visibility :hidden instead of hide(), it doesn't remove element from document flow.

$(' ... ').css('visibility', 'hidden');