jQuery.slide() 중에 테이블 열이 변경됩니다.

Question

데이터의 절반이 숨겨져 있고 버튼을 눌러 확장 할 수있는 테이블이 있습니다. 나는 패턴 here을 따르고있다. 여기

<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> 

내 자바 스크립트입니다 : 여기 내 html로되는 숨겨진 부분까지 스크롤되는 동안

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

/아래, 테이블 행위 것처럼 3가있다 열. 첫 번째 열의 두 번째 열은 오른쪽으로 이동하고 두 번째 열은 두 번째 열이 약간 왼쪽으로 이동합니다. 슬라이드가 완료되면 전체 두 번째 열이 적절한 위치로 다시 이동합니다.

테이블을 이와같이 만드는 것은 무엇입니까?

참고 : 두 번째 열에 숨겨진 데이터가없는 경우에는이 효과가 발생하지 않습니다. '12/24/2011 '및'Gadget '이 제거 된 경우 모든 것이 정상적으로 보일 것입니다.

Answer 1

나는 당신의 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/

Answer 2

테이블이나 열에 너비가 설정되어 있지 않은 것 같습니다. 유동적입니다.

너비를 설정해보십시오.