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可能会导致网格化，并且还会向td提供宽度，如

table tr td{
    width:200px;
}

请参阅此DEMO

使用slideUp DEMO2

查看此内容

Answer 2

因为你基本上是从dom中删除它，而不是将其删除。

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

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

Answer 3

看起来jQuery在.slideUp（）中或者即使你使用.hide（1000）也可以为td的宽度设置动画。

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

td { width: 200px; }

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

隐藏表中的元素会导致列移位

3 个答案: