javascript - 隐藏表格中的元素会导致列移动

Question

在此示例http://jsfiddle.net/bYAK4/中，为什么隐藏单元格会导致整个列移动，我该怎么做才能避免这种情况？

HTML

<table>
    <tr>
        <td>John</td>
        <td>Doe</td>
    </tr>
    <tr>
        <td>Hello</td>
        <td><div class="hide">World</div></td>
    </tr>
</table>

CSS

table {
    width:400px;
}

JS

$(document).ready(function() {
    $('.hide').slideUp();
});

Answer 1

尝试

$(document).ready(function() {
    $('.hide').hide();
});

slideUp可能会导致meshup，也会给宽度带来td喜欢

table tr td{
    width:200px;
}

看这个演示

使用DEMO2看到这个slideUp

Answer 2

因为你本质上是从 dom 中删除它，而不是破坏它。

如果您只想隐藏它，请使用：

$(document).ready(function() {
    $('.hide').css('visibility', 'hidden');
});

Answer 3

看起来 jQuery 正在为 td 的宽度设置动画，无论是在 .slideUp() 中，还是在使用 .hide(1000) 时。

尝试将宽度添加到 td 而不是表格：

td { width: 200px; }

见小提琴。我在 td 周围添加了一个边框，这样你就可以看到会发生什么。