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

我不确定这是否重要，但我还有一个Bootstrap插件-offcanvas-由jasny bootstrap提供，并且我也无法在iPhone上垂直滚动该侧边菜单。所有这些都在模拟器中工作，但在真实环境中失败。

也许这两个问题以某种方式相互关联。

感激任何帮助。

编辑：

我刚刚在Android手机上测试了一下，似乎我可以如预期地水平滚动表格。然而，即使在Android上，我仍然无法垂直滚动侧边菜单。我想这意味着这些问题并不相互关联。

- kfirba

Answer 1

我发现默认情况下 .table 元素具有 max-width: 100%，而 Safari "尊重" 这一点，因此将宽度设置为100%，这意味着 .table 元素不会溢出 .table-responsive 元素，从而导致无法滚动。这在某种程度上不影响 Android 手机。

修复方法非常简单：

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

- kfirba

---

Bootstrap响应式表格在iPhone上绝对有效。我已经使用过很多次了。一定有其他CSS覆盖了Bootstrap样式。 - Turnip

@SexyTurnip 你可能是对的。我不确定是什么导致了这个问题。目前手动将max-width设置为none可以解决iPhone上的问题。我刚才看了一下，max-width: 100%被捆绑在bootstrap中，所以它必须来自原始的bootstrap。也许iOS 9.1存在某些bug？我不确定发生了什么... - kfirba

@Turnip 我也遇到了同样的问题，在我的桌面版 Chrome 上一切正常，但在 iOS 版本的 Chrome 上却无法工作...由于被放置在自定义元素的 Shadow DOM 中，我几乎可以确定它不会被其他样式覆盖。要发生这种情况，CSS 必须通过 DOM 边界泄漏，希望在原生 Web 组件上不会发生这种情况... - Patrick Beynio

Answer 2

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

- Rana Nematollahi