스크롤 테이블

2005 년 Stu Nichols는 this entry이라는 게시글에 테이블을 스크롤하는 행이있는 고정 헤더를 붙였습니다.스크롤 테이블

이 작업에 대한 최신 업데이트가 있습니까? 아니면 2005 년에 Stu가 쓴 글은 여전히 최신 것으로 간주되는 것입니까?

2010-06-04 Phillip Senn

그것은 현재 존재하는 AFAIK입니다. 어떤 브라우저를 지원해야하는지에 따라 CSS를 사용하여 overflow: scroll을 tbody 요소에 첨부 할 수 있지만 공식적으로 CSS 사양에는 없으며 반 신뢰성있게 작동합니다. 파이어 폭스는 그것을 이해하는 것, 그리고 크롬뿐만 아니라,하지만 IE는 그것을 enitrely 무시 믿습니다.

출처

2010-06-04 17:30:43

두 번째 방법은 다소 JQGrid이 스크롤 가능 테이블을 처리하는 방법입니다. 해당 데모를 here에서 살펴보십시오. 휠을 다시 생성하는 대신에 TableToGrid 메서드를 사용하고 싶습니다. 이렇게하면 html 테이블이 만들어져 그 표식으로 바뀝니다.

출처

2010-06-04 17:28:20

jQuery를 사용하는 경우이 작업을 수행하는 데 좋은 플러그인이 있습니다. 당신은 그것을 찾을 수 있습니다 here

출처

2010-06-04 17:30:14 Ehsan

당신에 대해 잘 모르겠지만 동적 인 너비 (및 높이)를 처리 할 수있는 테이블이 필요합니다. 파이어 폭스 (< = 3.6)는 이것을 매우 잘 처리 할 수 있으며 제안 된 프레임 워크 중 어느 것도 깨끗한 방식으로 처리하지 못하는 것 같습니다.

https://bugzilla.mozilla.org/show_bug.cgi?id=552080

이 문제에 투표 부담없이 파이어 폭스 사람이 자신의 descition을 재고있다 : 그들은 버그를 부르는 너무 나쁜 파이어 폭스 3.7은이 기능을 제거하고 있습니다.

출처

2010-06-04 22:32:25 Andreas

나는 좋은 해결책이 있습니다! ... 당신이 이해 할 수 있다면 그것은 모든 CSS를 디스플레이에 관하여 ... 를 참조

<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Ex Scrollable Table</title> 
     <style type="text/css"> 

      .divScroll 
      { 
       display:block; 
       overflow-x: hidden; 
       overflow-y: scroll; 
       -ms-overflow-x: hidden; 
       -ms-overflow-y: scroll; 
       height: 70px; 
      }    

      .Header 
      { 
       display:table-header-group; 
      } 


      .HeaderCell 
      { 
       text-align: left; 
       display: table-cell; 
      } 

      .FooterCell 
      { 
       display: table-cell; 
       text-align: left; 
      } 

      .Row 
      { 
       display:table-row;     
      } 


      .Cell 
      { 
       display: table-cell; 
      } 

      .Footer 
      { 
       display: table-footer-group; 
      } 

     </style> 

    </head> 
    <body> 
     <table>    
      <thead> 
       <tr> 
        <th class="Header"> 
         <div class="Row"> 
          <div class="HeaderCell" style="width:140px;">Column1</div> 
          <div class="HeaderCell" style="width:90px;">Column2 </div> 
          <div class="HeaderCell" style="width:190px;">Column3</div> 
          <div class="HeaderCell" style="width:100px;">Column4</div> 
         </div> 
        </th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td class="divScroll"> 

         <div class="Row"> 
          <div class="Cell" style="width:140px;">c1</div> 
          <div class="Cell" style="width:90px;">c2</div> 
          <div class="Cell" style="width:190px;">c3</div> 
          <div class="Cell" style="width:100px;">c4</div> 
         </div> 


         <div class="Row"> 
          <div class="Cell" style="width:140px;">c1</div> 
          <div class="Cell" style="width:90px;">c2</div> 
          <div class="Cell" style="width:190px;">c3</div> 
          <div class="Cell" style="width:100px;">c4</div> 
         </div> 


         <div class="Row"> 
          <div class="Cell" style="width:140px;">c1</div> 
          <div class="Cell" style="width:90px;">c2</div> 
          <div class="Cell" style="width:190px;">c3</div> 
          <div class="Cell" style="width:100px;">c4</div> 
         </div> 

         <div class="Row"> 
          <div class="Cell" style="width:140px;">c1</div> 
          <div class="Cell" style="width:90px;">c2</div> 
          <div class="Cell" style="width:190px;">c3</div> 
          <div class="Cell" style="width:100px;">c4</div> 
         </div> 

         <div class="Row"> 
          <div class="Cell" style="width:140px;">c1</div> 
          <div class="Cell" style="width:90px;">c2</div> 
          <div class="Cell" style="width:190px;">c3</div> 
          <div class="Cell" style="width:100px;">c4</div> 
         </div> 

         <div class="Row"> 
          <div class="Cell" style="width:140px;">c1</div> 
          <div class="Cell" style="width:90px;">c2</div> 
          <div class="Cell" style="width:190px;">c3</div> 
          <div class="Cell" style="width:100px;">c4</div> 
         </div> 

         <div class="Row"> 
          <div class="Cell" style="width:140px;">c1</div> 
          <div class="Cell" style="width:90px;">c2</div> 
          <div class="Cell" style="width:190px;">c3</div> 
          <div class="Cell" style="width:100px;">c4</div> 
         </div> 

         <div class="Row"> 
          <div class="Cell" style="width:140px;">c1</div> 
          <div class="Cell" style="width:90px;">c2</div> 
          <div class="Cell" style="width:190px;">c3</div> 
          <div class="Cell" style="width:100px;">c4</div> 
         </div> 


        </td> 

       </tr>     
      </tbody> 
      <tfoot> 
       <tr> 
        <th class="Footer"> 
         <div class="Row"> 
          <div class="FooterCell" style="width:140px;">A</div> 
          <div class="FooterCell" style="width:90px;"> B</div> 
          <div class="FooterCell" style="width:190px;">C</div> 
          <div class="FooterCell" style="width:100px;">D</div> 
         </div> 
        </th>      
       </tr> 
      </tfoot>  
     </table>   



    </body> 
</html>

출처

2014-02-11 04:19:03

을이 시도 [여기 바이올린의 (http://jsfiddle.net/PhillipSenn/ztTmv/). Carlos 감사합니다! –

스크롤 테이블

답변

관련 문제