Сделать прокручиваемую таблицу 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 в overflow:scroll в направлении y и придать ему фиксированную высоту. Чтобы исправить строку заголовка, просто оберните содержимое добавлением тега <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>