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

我整个过程都使用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;”和“ overflow:scroll;”标签。

它添加了滚动条,但宽度仍不能准确表示:

最佳答案

将表放入容器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元素。

10-02 00:59
查看更多