Table can not scroll on IOS device? - html

Question

I am currently working on a html table, and this is what I have so far:
<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>
Since I'd like to make elements in the table not to change line, which means if overflow occurs, I'd like to make it scrollable, so I added this to the table element:
<style='display: block; overflow-x: auto; white-space: nowrap;'>
It successfully works on every different device except IOS system. Also, I've tried modifying the overflow-x: auto to overflow-x:touch, but still, the table wasn't scrollable on IOS device. Any ideas about how to solve this problem? Thanks in advance.

Answer 1

Please add the below CSS and check if it works
<style>
table
{
overflow-x: scroll;
}
</style>
Useful links: https://community.grafana.com/t/grafana-5-overflow-scroll-doest-work-on-mobile/5480/5

Answer 2

Use both overflow: scroll and -webkit-overflow-scrolling: touch for 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 3

It's an old post but i was struggling with this and found a solution, i had the same problem, in desktop and browser mobile view, everything was working fine, but in the iphone even in safari and chrome the table came out of the container, but the solution was much simpler than i thought
Just wrap the table in a div with overflow-x: auto, in your case:
<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>