16

我有一个带有以下标记的表：

<div class="table-responsive"
    <table class="table table-hover"
        <!-- table data-->
    </table>
</div>

正如文档所说，我的表格现在应该能够水平滚动。如果我使用 chrome 的设备模拟器，它确实有效。但是，当我使用真正的 iPhone（在这种情况下为 iPhone 5s - 也在 iPhone 6 上测试过）尝试它时，我根本无法水平滚动表格。默认情况下，我可以看到视口中显示的最后一列，但我无法横向滚动它。我在 iPhone 上的 chrome 和 safari 中进行了尝试，并得到了相同的行为。

我试图做的是添加，-webkit-overflow-scroll: touch但它没有解决问题。我也尝试手动添加overflow-x: scroll而不是默认添加，auto但无济于事。

我不确定这是否重要，但我也有一个引导插件 - offcanvas - by jasny bootstrap，我也无法在我的 iPhone 上垂直滚动那个侧边菜单。这一切都适用于模拟器，但在真实的东西上却失败了。

也许这两者有某种联系。

任何帮助表示赞赏。

编辑：

我刚刚在安卓手机上测试过，看起来我可以按预期水平滚动表格。但是，即使在 android 上，我仍然无法垂直滚动侧边菜单。我想这意味着这些问题没有相互联系。

4

2 回答 2

22

我发现默认情况下.table元素具有max-width: 100%并且 safari “尊重”这一点，因此它将宽度设置为 100%，这意味着.table元素不会溢出.table-responsive元素，因此导致它不可滚动。这不知何故不会影响安卓手机。

修复相当简单：

.table-responsive .table {
    max-width: none;
}
于 2015-11-18T18:22:35.423 回答
12 
.table-responsive .table {
    max-width: none;
    -webkit-overflow-scrolling: touch !important;
}
于 2016-08-22T07:05:36.690 回答