在手机上水平滚动

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; 
}