Таблицу нельзя прокрутить на устройстве 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

Используйте как overflow: scroll, так и -webkit-overflow-scrolling: touch для iOS-Safari.

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>

Answer 2

Пожалуйста, добавьте приведенный ниже CSS и проверьте, работает ли он

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

Полезные ссылки: https://community.grafana.com/t/grafana-5-overflow-scroll-doest-work-on-mobile/5480/5