在移动设备上水平滚动

Question

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

.row {
    overflow-x: scroll;
}

例如，行的宽度可以是300px（因为100％），并且td的固定宽度可以是200px。

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

写这个

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

在PC上完成所有工作（水平滚动触摸板）。但是当我从移动浏览器进行访问时无法滚动。

我也试过-webkit-overflow-scrolling：touch但似乎无法被浏览器识别（包括chrome和opera）。

关于如何解决的任何想法？

我还在下面提供了一些可用于解决问题的头部信息

$scope.titles = [{title: "abc"}, {title: "pqr"}, {title: "xyz"}];
$scope.contact = {};

提前致谢

Answer 1

如果您使用的是bootstrap。您可以使用.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;
}

Answer 2

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

tr {
    overflow-x: scroll;
}

你可以在td上加上必要的宽度