表格不能在窄屏幕上滾動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元素。