Question

这就是我所拥有的：

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

当我尝试在iOS设备上上下滚动时（当我的手指触摸桌子时），它不会滚动。它只是上下拖动整个页面。为了滚动，我必须触摸身体背景或除桌子之外的任何其他物体。这个问题在Android设备中没有出现，但它似乎存在于iOS设备上，如iPhone。

我尝试将overflow-y: auto添加到<div class="table-responsive">，但它仍无效。

我需要添加什么才能在移动设备上启用滚动功能（特别是Apple设备）？

Answer 1

对于遇到此问题的其他人，我要解决的所有问题是将以下行添加到表格响应类的css中：

-webkit-overflow-scrolling: touch;

现在它按预期工作。

Answer 2

我遇到了同样的问题，然后我从html和body中删除了overflow: hidden;。 Safari在IOS上的行为与Android上Chrome的行为相匹配，即页面再次垂直滚动。检查并查看.table-responsive的父级是否有overflow-hidden并尝试将其评论出来。

我仍然在寻找一种更好的解决方案，不会强迫我改变父元素的CSS。

[编辑]

找到它。您无需更改.table-responsive父级的溢出值，只需确保添加

即可

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

Answer 3

这只会使表格水平滚动。垂直滚动表并不是Twitter Bootstrap的一部分。

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