Question

Hey Guys有没有办法使用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>

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

Answer 1

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

使JQueryMobile表可滚动？

1 个答案: