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.

Notum

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

Notum

Bootstrap responsive tables definitely work on iPhone. I've used them lots of times. There must be some other CSS overriding the bootstrap styles – Priam

@SexyTurnip You might be right. I'm not sure what could've caused it. As it stands setting the max-width to none manually solved the issue on iPhones. I just took a look and max-width: 100% is bundled in bootstrap so it must come from the original bootstrap. Maybe there is some bug with iOS 9.1? I'm not sure what's going on... – Notum

@Priam i got the same issue, on my desktop chome everything works, but on iOS chome, it's not working... and due to being placed inside custom elements shadow dom, i'm almost 100% sure it's not overwritten by other styles. for that to happen css would need to leak through dom boundaries, which hopefully can't happen on native web components... – Drank

Answer 2

.table-responsive .table {
    max-width: none;
    -webkit-overflow-scrolling: touch !important;
}

Vespertine

Answer 3

.table-responsive {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

Candide