我有一个移动网站,里面有很多链接和表格。
我整个过程都使用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元素。