어떤 이유로 div처럼 테이블 행을 표시하거나 숨길 수 없습니다.

Question

결함이없는 div 슬라이더에 animatedcollapse를 사용했습니다. 그러나 이제는 테이블 행 슬라이더를 사용해야하며 전혀 동일한 기능을 수행하지 않습니다. 다음은 내가 사용하고있는 테이블의 일부입니다.

<table> 

게시 회신 ...

</div> 
    <script type="text/javascript"> 

      $(document).ready(function() { 
       var editor = CKEDITOR.replace('newsfeed_status7', 
          { 
            toolbar : 
            [ 
              ['Bold', 'Italic', 'Underline', '-', 'Font', 'FontSize', '-', 'Undo', 'Redo', '-', 'MediaEmbed','Smiley', 'SpellChecker', 'Find','Replace'] 
            ], 
            height: '50px' 
          }); 

      }); 

    </script> 
     <table width="100%"> 
      <tr> 
       <td align="left" width="25%" style="padding-left:15px;"></td> 
       <td align="left" width="25%"></td> 
       <td align="right"></td> 

       <td align="right" width="20%" style="padding-right:15px;"><input type="submit" value="Reply To Post" class="submitbtn" /></td> 
      </tr> 
     </table> 
    </td> 
</tr>       

답글 07/11/10 오후 3시 12분 20초 여기에 0

바닥 글 파일에 배치되는 것입니다 : 그것은 조금 추한로

<script type="text/javascript"> 
animatedcollapse.addDiv('tr7', 'fade=1') animatedcollapse.addDiv('tr6', 'fade=1') animatedcollapse.addDiv('tr4', 'fade=1') animatedcollapse.addDiv('tr2', 'fade=1') animatedcollapse.addDiv('tr1', 'fade=1') animatedcollapse.ontoggle=function($, divobj, state){} 
animatedcollapse.init() 
</script> 

Answer 1

당신은 (당신이 절대적으로 표 기반의 레이아웃에 연결되어 가정) 솔루션을 같이하지 않을 수 있습니다.

첫 번째 표 셀 안에 다른 표를 중첩해야합니다. 그래서 같이 :

table 
    tr 
     td class="show-hide" 
     table 
      tr 
       td 
       td 
       td 

등 ...

가 거기에서 당신은 테이블 셀에 즐겨 찾기 표시 숨기기 애니메이션을 할당 할 수 있습니다 나는 "쇼 숨기기"를 표시했다.

또는이 간단한 응용 프로그램은 행을 div (tr 대신)로 출력 한 다음 구조를 만들기 위해 테이블을 내부에 출력하는 것입니다.

애니메이션은 이러한 솔루션 버전 중 하나에서 멋지게 보입니다. 필요로하는 격자 구조를 유지할 수 있도록 각 td에 대해 정의 된 너비를 지정해야하는 것이 좋습니다.

희망이 도움이됩니다.

완전히 xhtml을 준수하려면 "표"대신 "dl"을 사용하십시오. animatedcollapse한다고 가정

Answer 2

, 나는 대부분의 브라우저에서 (그들의 다른/독특한 레이아웃 모델에 오버 플로우가 단순히 테이블 행에서 작동하지 않습니다 두려워 요소에 overflow: hidden를 설정하고 그 height을 변경하여 작동하는 애니메이션이다 어쨌든 대부분의 경우).

작동 시키려면 해당 행을 자체 테이블로 분리해야합니다. 그런 다음 가장 넓은 호환성을 위해 내부에 숨겨야하는 테이블을 <div>에 넣고 div에 오버플로/애니메이션을 적용 할 수 있습니다.

이제 여러 테이블 (대상 행 앞뒤에 이전 행이있는 경우 3 개)이 있으므로 하나의 테이블처럼 보이도록 행을 정렬해야합니다. 이 작업은 테이블에 스타일 table-layout: fixed; width: 100%;을 부여한 다음 (첫 번째 행의 셀에 width 스타일로 다른 너비와 다른 너비가 필요한 열의 크기를 조정하거나 <col> 요소 집합으로) 수행해야합니다.

table-layout: fixed은 일반적으로 기본 'auto'테이블 레이아웃 알고리즘보다 더 빠르고 예측 가능한 크로스 브라우저이므로 일반적으로 선호됩니다.