在jQuery.slide()期间，表列会发生变化

Question

我有一个表，其中一半的数据是隐藏的，可以通过按下按钮展开。我在这里遵循这个模式。这是我的html:

<button class="toggleBtn">Hide/Show</button>
<table>
<tbody>
<tr>
    <td>Session Name : </td>
    <td>Generic name here</td>
</tr>
<tr>
    <td>Jump Date : </td>
    <td>12/25/2011</td>
</tr>
</tbody>
<tbody class="hiddenJumpSessionDetails" style="display:none;">
    
    <tr>
        <td>Created On : </td>
        <td>12/24/2011</td>
    </tr>
    <tr>
        <td>Inspector : </td>
        <td>Gadget</td>
    </tr>
    <tr>
        <td>Other Notes : </td>
        <td></td>
    </tr>
</tbody>

这是我的javascript:

<script>
$(document).ready(function()
{
    $(".toggleBtn").click(function()
    {
        $(".hiddenJumpSessionDetails").slideToggle();
    })
})

当隐藏部分向上/向下滚动时，表就像有3列一样。第一个中的第二列向右移动，第二个中的第二列稍微向左靠近。一旦幻灯片完成，整个第二列将移回适当的位置。

是什么使表表现出这种方式?

注意:当隐藏的第二列中没有数据时，此效果不会发生。如果把"12/24/2011"one_answers"Gadget"去掉，一切都会好起来的。

Answer 1

看起来你没有在表格或列上设置任何宽度，所以它将是流动的。

Answer 2

我能够通过在tbody元素中设置display:block并在脚本中隐藏元素来正确地工作，如下所示:

<tbody style="display:block;" >
.
.
.
<tbody class="hiddenJumpSessionDetails" style="display:block;">
$(document).ready(function()
{
    $(".hiddenJumpSessionDetails").hide();
    $(".toggleBtn").click(function () {
      $(".hiddenJumpSessionDetails").slideToggle("slow");
    });
});

下面是一个例子:http://jsfiddle.net/aa7Kv/