时间戳

首页 > 解决方案 > IOS设备上的表格不能滚动？

html - IOS设备上的表格不能滚动？

问题描述

我目前正在处理一个 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 系统之外的所有不同设备上成功运行。另外，我尝试将 to 修改overflow-x: auto为overflow-x:touch，但该表仍然无法在 IOS 设备上滚动。关于如何解决这个问题的任何想法？提前致谢。

标签： htmlioscssscrolloverflow

解决方案

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

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

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

推荐阅读