How do you simply hide an element without it collapsing in jQuery

Question

I have a table of todos and on the leftmost column are normally checkboxes to mark completed. I want to hide those checkboxes untill a user hovers over a task, upon which that tasks checkbox becomes visible.

Currently when I hide the checkboxes using

$('table#incompleted_tasks tr td input[type="checkbox"]').css('display', 'none');

the actual column collapses and following columns are shunted left. This means when i hover over a task the checkbox is expanded but everything is shunted right and thus misaligned.

Id like to preserver that hidden columns width but how?

Answer 1

Use

$('table#incompleted_tasks tr td input[type="checkbox"]').css('visiblity', 'hidden');

The element will not be shown, but the place for it will be “held occupied” for in the page flow.

Answer 2

You can set "visibility" to "hidden":

$('table#incompleted_tasks tr td input[type="checkbox"]').css('visibility', 'hidden');