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.

score 22 · Accepted Answer · answered Nov 18 '15 at 18:22

22

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

answered Nov 18 '15 at 18:22

kfirba

5,231
14
41
70

Bootstrap responsive tables definitely work on iPhone. I've used them lots of times. There must be some other CSS overriding the bootstrap styles – Turnip Nov 18 '15 at 18:24
@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... – kfirba Nov 18 '15 at 18:29
@Turnip 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... – Patrick Beynio Aug 19 '21 at 13:08

score 12 · Answer 2 · edited Aug 22 '16 at 09:40

12

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

edited Aug 22 '16 at 09:40

worldofjr

3,868
8
37
49

answered Aug 22 '16 at 07:05

Rana Nematollahi

307
4
5

Bootstrap responsive table doesn't scroll horizontally on iOS devices

Edit:

2 Answers2