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，但无济于事。

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

也许这两者有某种联系。

感谢任何帮助。

编辑：

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

Answer 1

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

Answer 2

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

修复相当简单：

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