使 JQueryMobile Table 可滚动？

Question

大家好，有没有办法使用 Jquery 移动设备使 Table 可滚动？找不到适合我目的的解决方案。

假设我有一个这样的 table：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>

我的问题是我希望 Table 只显示 5 行，其余的应该可以通过滚动访问。这可能吗？

Answer 1

如果这对您来说足够了，您可以将容器 div 在 y 方向设置为 overflow:scroll 并给它一个固定的高度。要修复 header 行，只需用附加的 <span> 标记包裹内容并将其设置为 position:fixed。现在给第一个内容行一点 space 到顶部（例如作为填充），你就完成了：

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>

使 JQueryMobile Table 可滚动？

Make a JQueryMobile Table Scrollable?

html

javascript

css

jquery

jquery-mobile