Bootstrap responsive table not scrolling vertically on iOS devices

Question

This is what I have:

    
        ....
    
&         


        
                      

              相关标签:
       
      

Answer 1

This only makes tables scroll horizontally. Vertically scrolling with tables is not apart of Twitter Bootstrap.

Check out their documentation for more information: Responsive Tables under the CSS Tab

Source: http://getbootstrap.com/css/#tables

Answer 2

For anyone else having this problem, all I had to do to solve it was to add the following line to the css of the table-responsive class:

-webkit-overflow-scrolling: touch;

And now it works as expected.

Answer 3

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;
}