Bootstrap 响应式表格不会在 iOS 设备上水平滚动

Posted 2023-03-06

【中文标题】Bootstrap 响应式表格不会在 iOS 设备上水平滚动

【英文标题】：Bootstrap responsive table doesn't scroll horizontally on iOS devices

【发布时间】：2016-02-19 18:20:04

【问题描述】：

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

<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 上，我仍然无法垂直滚动侧边菜单。我想这意味着这些问题没有相互联系。

【参考方案1】：

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

【参考方案2】：

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

修复相当简单：

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

【讨论】：

Bootstrap 响应式表格绝对适用于 iPhone。我已经用过很多次了。必须有其他一些 CSS 覆盖引导样式

@SexyTurnip 你可能是对的。我不确定是什么原因造成的。就目前而言，将最大宽度设置为无手动解决了 iPhone 上的问题。我刚看了看，max-width: 100% 捆绑在引导程序中，所以它必须来自原始引导程序。也许 ios 9.1 有一些错误？我不确定发生了什么...

@Turnip 我遇到了同样的问题，在我的桌面 chome 上一切正常，但在 iOS chome 上，它不起作用......并且由于被放置在自定义元素 shadow dom 中，我快 100 % 确定它不会被其他样式覆盖。为了实现这一点，css 需要通过 dom 边界泄漏，希望这不会发生在本机 Web 组件上......