如何在jQuery中隐藏元素而不使其崩溃

我有一个TODO表，最左边的一列通常是复选框，用于标记已完成。我想隐藏这些复选框，直到用户将鼠标悬停在某个任务上，该任务复选框才可见

当前，当我使用隐藏复选框时

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

实际列折叠，后续列向左分流。这意味着当我将鼠标悬停在一个任务上时，复选框被展开，但所有内容都被向右分流，因此未对齐

我想保留隐藏列的宽度，但如何使用

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

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

元素将不会显示，但其位置将在页面流中“保持已占用”。

使用

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

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

---

元素将不会显示，但其位置将在页面流中“保持已占用”。

您可以将可见性设置为隐藏：

---

可以将可见性设置为“隐藏”：