javascript - 使 JQueryMobile 表可滚动？

Question

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

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

我的问题是我希望表格只显示 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>