在手机上水平滚动

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：触摸，但似乎无法被浏览器（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

如果您正在使用引导程序。您可以使用.table-responsive。

将表包装在此类的div中，如下所示：

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

这是类的定义：

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