html - 表格无法在 IOS 设备上滚动？

Question

我目前正在处理一个 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 设备上滚动。关于如何解决这个问题的任何想法？提前致谢。

Answer 1

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

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

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