Bootstrap responsive table doesn't scroll horizontally on iOS devices

Question

I have a table with the following markup:

<div class="table-responsive"
    <table class="table table-hover"
        <!-- table data-->
    </table>
</div>

As the documentation says, my table should now be able to scroll horizontally. It does work if I use chrome's devices emulator. However, when I try it using a real iPhone (iPhone 5s in this case - tested on iPhone 6 as-well) then I can't scroll the table horizontally at all. I can see the last column displayed in the viewport by default and I just can't scroll it side ways. I tried that in chrome and safari on my iPhone and got the same behavior.

What I tried to do is add the -webkit-overflow-scroll: touch but it didn't solve the problem. I've also tried to manually add overflow-x: scroll instead of the default auto but no avail.

I'm not sure it matters but I also have a bootstrap plugin - offcanvas - by jasny bootstrap and I can't scroll that side menu vertically on my iPhone as-well. It all works in the emulators but fails on the real thing.

Maybe those two are connected somehow.

Any help is appreciated.

Edit:

I have just tested that on an android phone and it seems like I can scroll the table horizontally as expected. However, I still can't scroll the side menu vertically even on android. I guess it means that these problems aren't connected to each other.

Answer 1

I found out that by default the .table element has max-width: 100% and safari "respects" this so it set the width to be 100% which means that the .table element isn't overflowing the .table-responsive element hence causing it to not be scrollable. This somehow doesn't affect android phones.

The fix was rather easy:

.table-responsive .table {
    max-width: none;
}