在窄屏幕上，jQuery Mobile中的表格不可滚动

Question

我有一个移动网站，里面有很多链接和表格。

我使用jQuery Mobile来完成整个事情。这是轮廓的样子：

<div data-role="page" id="" table_1>
  <div data-role="header">
    <h1>Timetable for MSc Programmes</h1>
  </div>

  <div data-role="main" class="ui-content">
    <table>
      <--! the large table is here -->

    </table>
  </div>

</div>

不幸的是，这就是我的手机页面的样子。无法看到完整的表格且不可滚动，因此访问者只能查看部分表格，除非他们切换到横向模式。

将一个表封装到div元素中并给它'webkit-overflow-scrolling：touch;'和'溢出：滚动;'标签

它添加了滚动条，但宽度仍未准确显示：

Answer 1

将表放在容器div中，并为该div提供一个CSS类。然后设置CSS类来滚动：

<div data-role="main" class="ui-content">
    <div class="tableCont">
        <table>
           <--! the large table is here -->

        </table>
   </div>
</div>

.tableCont {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

-webkit-overflow-scrolling允许移动webkit滚动各个dom元素。