在手機上水平滾動

Question

我有一個包含100％寬度的div。表格寬度取決於單元格寬度，並且必須大於div寬度。

<div class="row"> 
    <table> 
     <tr><td></td><td></td></tr> 
    </table> 
</div> 

例如，行的寬度可以是300px（因爲100％），並且td的固定寬度可以是200px。

在這種情況下，我需要在div區域內水平滾動整個表格。

寫這篇

.row { 
    overflow-x: scroll; 
} 

就PC的所有工作（水平與觸摸板滾動）。但是，當我從移動瀏覽器訪問是不可能滾動。

我也試過-webkit-overflow-scrolling：touch，但似乎無法被瀏覽器識別（包括chrome和opera）。

關於如何解決任何想法？

而且我把下面的一些頭信息，可以爲解決提前

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> 

由於是有用

Answer 1

100％是指相對於父元素和其他一切將在它的內部滾動

tr { 
    overflow-x: scroll; 
} 

，你可以把所需的寬度對TD

Answer 2

如果您使用引導程序。您可以使用.table-responsive。

包裹一個div表裏面有這個類象下面這樣：

<div class="table-responsive"> 
     <table> 
      <tr><td></td><td></td></tr> 
     </table> 
</div> 

這是類定義：

.table-responsive { 
    display: block; 
    width: 100%; 
    overflow-x: auto; 
    -ms-overflow-style: -ms-autohiding-scrollbar; 
}