JQueryMobile 테이블을 스크롤 할 수있게 만드시겠습니까?

Question

안녕하세요 얘들 아, Jquery Mobile을 사용하여 테이블을 스크롤 할 수있게 만드는 방법이 있습니까? 제 목적을위한 해결책을 찾을 수 없습니다. fiddle

<table data-role="table" class="ui-responsive ui-shadow gk-decorate testClass" id="someId" is="jqm-table" style="margin-left: %; width: %"> 
    <thead> 
     <tr> 
     <th data-priority="1">Title_1</th> 
     <th data-priority="1">Title_2</th> 
     <th data-priority="1">Title_3</th> 
     <th data-priority="1">Title_4</th> 
     <th data-priority="1">Title_5</th> 
     <th data-priority="1">Title_6</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <th>Content_1</th> 
     <td>Content_2</td> 
     <td>Content_3</td> 
     <td>Content_4</td> 
     <td>Content_5</td> 
     <td>Content_6</td> 
     </tr> 
     <tr> 
     <th>Content_1</th> 
     <td>Content_2</td> 
     <td>Content_3</td> 
     <td>Content_4</td> 
     <td>Content_5</td> 
     <td>Content_6</td> 
     </tr> 
     <tr> 
     <th>Content_1</th> 
     <td>Content_2</td> 
     <td>Content_3</td> 
     <td>Content_4</td> 
     <td>Content_5</td> 
     <td>Content_6</td> 
     </tr> 
     <tr> 
     <th>Content_1</th> 
     <td>Content_2</td> 
     <td>Content_3</td> 
     <td>Content_4</td> 
     <td>Content_5</td> 
     <td>Content_6</td> 
     </tr> 
     <tr> 
     <th>Content_1</th> 
     <td>Content_2</td> 
     <td>Content_3</td> 
     <td>Content_4</td> 
     <td>Content_5</td> 
     <td>Content_6</td> 
     </tr> 
    </tbody> 

내 문제는 5 개 행을 표시하고 나머지는 스크롤 접근 할 수 있어야한다에 내가 표를 원하는 것입니다 :

내가 테이블처럼이 있다고 할 수 있습니다. 가능합니까?

Answer 1

충분하면 div div를 y 방향으로 overflow:scroll으로 설정하고 고정 된 높이를 지정하면됩니다. 헤더 행을 수정하려면 내용을 추가 <span> 태그로 감싸고 position:fixed으로 설정하면됩니다. 이제 첫 번째 콘텐츠 행을 상단 (예를 들어, 패딩 등)에 약간의 공간을 제공하면 모든 작업이 완료됩니다

div { 
 
    overflow-y: scroll; 
 
    height: 100px; 
 
} 
 
table { 
 
    width: 100%; 
 
} 
 
thead th { 
 
    position: relative; 
 
} 
 
thead th span { 
 
    position: fixed; 
 
    background: white; 
 
} 
 
table tbody tr:first-child th, 
 
table tbody tr:first-child td { 
 
    padding-top: 20px; 
 
}

<div> 
 
    <table data-role="table" class="ui-responsive ui-shadow gk-decorate testClass" id="someId" is="jqm-table"> 
 
    <thead> 
 
     <tr> 
 
     <th data-priority="1"><span>Title_1</span></th> 
 
     <th data-priority="1"><span>Title_2</span></th> 
 
     <th data-priority="1"><span>Title_3</span></th> 
 
     <th data-priority="1"><span>Title_4</span></th> 
 
     <th data-priority="1"><span>Title_5</span></th> 
 
     <th data-priority="1"><span>Title_6</span></th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <th>Content_1</th> 
 
     <td>Content_2</td> 
 
     <td>Content_3</td> 
 
     <td>Content_4</td> 
 
     <td>Content_5</td> 
 
     <td>Content_6</td> 
 
     </tr> 
 
     <tr> 
 
     <th>Content_1</th> 
 
     <td>Content_2</td> 
 
     <td>Content_3</td> 
 
     <td>Content_4</td> 
 
     <td>Content_5</td> 
 
     <td>Content_6</td> 
 
     </tr> 
 
     <tr> 
 
     <th>Content_1</th> 
 
     <td>Content_2</td> 
 
     <td>Content_3</td> 
 
     <td>Content_4</td> 
 
     <td>Content_5</td> 
 
     <td>Content_6</td> 
 
     </tr> 
 
     <tr> 
 
     <th>Content_1</th> 
 
     <td>Content_2</td> 
 
     <td>Content_3</td> 
 
     <td>Content_4</td> 
 
     <td>Content_5</td> 
 
     <td>Content_6</td> 
 
     </tr> 
 
     <tr> 
 
     <th>Content_1</th> 
 
     <td>Content_2</td> 
 
     <td>Content_3</td> 
 
     <td>Content_4</td> 
 
     <td>Content_5</td> 
 
     <td>Content_6</td> 
 
     </tr> 
 
     <tr> 
 
     <th>Content_1</th> 
 
     <td>Content_2</td> 
 
     <td>Content_3</td> 
 
     <td>Content_4</td> 
 
     <td>Content_5</td> 
 
     <td>Content_6</td> 
 
     </tr> 
 
     <tr> 
 
     <th>Content_1</th> 
 
     <td>Content_2</td> 
 
     <td>Content_3</td> 
 
     <td>Content_4</td> 
 
     <td>Content_5</td> 
 
     <td>Content_6</td> 
 
     </tr> 
 
     <tr> 
 
     <th>Content_1</th> 
 
     <td>Content_2</td> 
 
     <td>Content_3</td> 
 
     <td>Content_4</td> 
 
     <td>Content_5</td> 
 
     <td>Content_6</td> 
 
     </tr> 
 
     <tr> 
 
     <th>Content_1</th> 
 
     <td>Content_2</td> 
 
     <td>Content_3</td> 
 
     <td>Content_4</td> 
 
     <td>Content_5</td> 
 
     <td>Content_6</td> 
 
     </tr> 
 
     <tr> 
 
     <th>Content_1</th> 
 
     <td>Content_2</td> 
 
     <td>Content_3</td> 
 
     <td>Content_4</td> 
 
     <td>Content_5</td> 
 
     <td>Content_6</td> 
 
     </tr> 
 
     <tr> 
 
     <th>Content_1</th> 
 
     <td>Content_2</td> 
 
     <td>Content_3</td> 
 
     <td>Content_4</td> 
 
     <td>Content_5</td> 
 
     <td>Content_6</td> 
 
     </tr> 
 
     <tr> 
 
     <th>Content_1</th> 
 
     <td>Content_2</td> 
 
     <td>Content_3</td> 
 
     <td>Content_4</td> 
 
     <td>Content_5</td> 
 
     <td>Content_6</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>