Table can not scroll on IOS device?

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.