在移动设备上水平滚动答案

【问题标题】：Scrolling horizontally on mobile在移动设备上水平滚动
【发布时间】：2017-05-23 21:21:33
【问题描述】：

我有一个 100% 宽度的 div，其中包含一个表格。表格宽度取决于单元格宽度，并且必须大于 div 宽度。

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

例如 row 的宽度可以是 300px（因为 100%），而 td 的固定宽度可以是 200px。

在这种情况下，我需要在 div 区域内水平滚动整个表格。

写这个

.row {
    overflow-x: scroll;
}

让所有工作都在电脑上运行（使用触摸板水平滚动）。但是当我从移动浏览器访问时无法滚动。

我也尝试过 -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">

提前致谢

【问题讨论】：

【解决方案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;
}

【讨论】：

【解决方案2】：

100 % 意味着相对于父元素，其他所有内容都将在其中滚动

tr {
    overflow-x: scroll;
}

你可以在 td 上设置必要的宽度

【讨论】：