表格不能在窄屏幕上滚动jQuery Mobile

Question

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

我用整个事情jQuery手机。这里的轮廓是什么样子：

<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的溢出滚动：触摸;”和'溢出：滚动'标签。

它补充滚动条，但宽度仍然没有精确地表示：

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元素。