IOS设备上的表格不能滚动？答案

【问题标题】：Table can not scroll on IOS device?IOS设备上的表格不能滚动？
【发布时间】：2020-02-05 06:26:13
【问题描述】：

我目前正在处理一个 html 表格，这就是我目前所拥有的：

        <table class='table' id="intern_table" style='display: block; overflow-x: auto; white-space: nowrap;' >
            <thead>
                <tr id="intern_table_title" style="color: black">
                <th scope="col" class='text-center'>Industry Category</th>
                <th scope="col" class='text-center'>Name</th>
                <th scope="col" class='text-center'>Job Category</th>
                <th scope="col" class='text-center'>Job Name</th>
                <th scope="col" class='text-center'>Job Location</th>
                <th scope="col" class='text-center'>Deadline</th>
                <th scope="col" class='text-center'>hits</th>
                </tr>
            </thead>
            <tbody>
                ....
            </tbody>
        </table>

由于我想让表格中的元素不换行，这意味着如果发生溢出，我想让它可以滚动，所以我在表格元素中添加了这个：

<style='display: block; overflow-x: auto; white-space: nowrap;'>

它可以在除 IOS 系统之外的所有不同设备上成功运行。另外，我尝试将overflow-x: auto 修改为overflow-x:touch，但该表仍然无法在IOS 设备上滚动。关于如何解决这个问题的任何想法？提前致谢。

【问题讨论】：

您使用的是哪个 iOS 设备？

标签： html ios css scroll overflow

【解决方案1】：

请添加下面的 CSS 并检查它是否有效

<style> 
table 
{
overflow-x: scroll;
}
</style>

有用的链接：https://community.grafana.com/t/grafana-5-overflow-scroll-doest-work-on-mobile/5480/5

【讨论】：

【解决方案2】：

在 iOS-Safari 中同时使用 overflow: scroll 和 -webkit-overflow-scrolling: touch。

table {
  white-space: nowrap;
  overflow: scroll;
  -webkit-overflow-scrolling: touch
}

<table class='table' id="intern_table">
        <thead>
            <tr id="intern_table_title" style="color: black">
            <th scope="col" class='text-center'>Industry Category</th>
            <th scope="col" class='text-center'>Name</th>
            <th scope="col" class='text-center'>Job Category</th>
            <th scope="col" class='text-center'>Job Name</th>
            <th scope="col" class='text-center'>Job Location</th>
            <th scope="col" class='text-center'>Deadline</th>
            <th scope="col" class='text-center'>hits</th>
            </tr>
        </thead>
        <tbody>
            <tr><td colspan="7">...</td></tr>
        </tbody>
</table>

【讨论】：

【解决方案3】：

这是一篇旧帖子，但我一直在努力解决这个问题并找到了解决方案，我遇到了同样的问题，在桌面和浏览器移动视图中，一切正常，但在 iphone 中，即使在 safari 和 chrome 中，表格也出现了容器，但解决方案比我想象的要简单得多

在你的情况下，只需使用overflow-x: auto 将表格包装在一个 div 中：

<div style="overflow-x:auto;">
    <table class='table' id="intern_table">
    <thead>
        <tr id="intern_table_title" style="color: black">
        <th scope="col" class='text-center'>Industry Category</th>
        <th scope="col" class='text-center'>Name</th>
        <th scope="col" class='text-center'>Job Category</th>
        <th scope="col" class='text-center'>Job Name</th>
        <th scope="col" class='text-center'>Job Location</th>
        <th scope="col" class='text-center'>Deadline</th>
        <th scope="col" class='text-center'>hits</th>
        </tr>
    </thead>
    <tbody>
        <tr><td colspan="7">...</td></tr>
    </tbody>
    </table>
</div>

【讨论】：