iOS设备上Bootstrap响应式表格无法垂直滚动

Question

这是我现有的内容：

<div class="table-responsive">
    <table class="table" style="background: transparent">
        ....
    </table>
</div>

我正在使用以下的bootstrap.css文件：http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css

当我在iOS设备上尝试上下滚动表格时，它无法滚动。它只是将整个页面向上或向下拖动。我必须触摸body背景或除表格以外的任何其他对象才能滚动。这个问题在Android设备上没有出现，但似乎存在于iOS设备（如iPhone）上。

我试图将overflow-y: auto添加到<div class="table-responsive">中，但仍然不起作用。

我需要添加什么才能在移动设备上（具体来说是苹果设备）启用滚动功能？

- DemCodeLines

Answer 1

如果有其他人遇到这个问题，我只需要在table-responsive类的CSS中添加以下行就可以解决它：

对于任何其他遇到此问题的人，我所做的只是将以下行添加到table-responsive类的CSS中，以解决它：

-webkit-overflow-scrolling: touch;

现在它按预期工作。

- Luccas Correa

---

这个确实起作用了...但是我必须将这个CSS应用到一个父级div上，显然它是引起问题的原因...我完全不知道是什么导致了这个错误...我开始查看父级div...因为当它尝试向下滚动页面时...我注意到一些div会正确地停留在原地...而其他一些div却会随着我的手指被拉下来。 - nawlbergs

不要指望这个问题会在Bootstrap v3中得到修复。 - nawlbergs

我的主要浏览器滚动条在应用此属性时无法使用，显示“无效的属性值”。 - Mustafa Kunwa

Answer 2

我遇到了同样的问题，然后我从html和body中移除了 overflow: hidden;。在IOS上，Safari的行为与Android上的Chrome一致，即页面可以再次垂直滚动。请检查并查看 .table-responsive 的父类是否有 overflow-hidden，尝试将其注释掉。

我仍在寻找一个更好的解决方案，不需要改变父元素的CSS。

[编辑]

找到了。您不需要更改 .table-responsive 父元素的 overflow 值，只需确保添加

。

parent {
    overflow-y: scroll; /* has to be scroll, not auto */
    -webkit-overflow-scrolling: touch;
}

- RJM

Answer 3

这只能使表格水平滚动。在 Twitter Bootstrap 中，使用表格进行垂直滚动不是一个常见的操作。

请查看他们的文档以获取更多信息：CSS 选项卡下的响应式表格。

来源： http://getbootstrap.com/css/#tables

- tgbrunet