Bootstrap 响应式表格在 iOS 设备上无法水平滚动

Question

我有一张带有以下标记的表格：

<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

但无济于事。

我不确定这是否重要，但我还有一个由 jasny bootstrap 开发的引导插件 - offcanvas，而且我也无法在 iPhone 上垂直滚动侧面菜单。这一切在模拟器中都有效，但在真实的东西上却失败了。

也许这两者有某种联系。

如有任何帮助，我们将不胜感激。

编辑：

我刚刚在 Android 手机上进行了测试，似乎我可以按预期水平滚动表格。但是，即使在 Android 上，我仍然无法垂直滚动侧面菜单。我想这意味着这些问题彼此之间没有联系。

Answer 1

我发现默认情况下

.table

元素具有

max-width: 100%

并且 safari“尊重”这一点，因此它将宽度设置为 100%，这意味着

.table

元素不会溢出

.table-responsive

元素，从而导致它不可滚动。这在某种程度上不会影响 Android 手机。

修复相当简单：

.table-responsive .table {
    max-width: none;
}

Answer 2

.table-responsive .table {
    max-width: none;
    -webkit-overflow-scrolling: touch !important;
}

Answer 3

.table-responsive {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}