Bootstrap responsive table not scrolling vertically on iOS devices

Question

This is what I have:

    
        ....
    
&         


        
      

Answer 1

I had the same problem then I removed overflow: hidden; from html and body. The behavior of Safari on IOS matched the behavior of Chrome on Android, ie, the page was scrolling vertically again. Check and see if a parent of .table-responsive has overflow-hidden and try commenting it out.

I'm still looking for a better solution that will not force me to alter the CSS of parent elements.

[EDIT]

Found it. You don't need to change the overflow value on the parent of .table-responsive, just make sure you add

parent {
    overflow-y: scroll; /* has to be scroll, not auto */
    -webkit-overflow-scrolling: touch;
}