Always show scrollbar in Bootstrap table-responsive

Question

I am using .table-responsive class to make my Bootstrap tables responsive and it's working fine but the user doesn't have any indicator that the table is horizontally scrollable!

How can I make the horizontal scrollbar always displayed, not only after the user actually starts scrolling.

Edit

The solution mentioned here almost works: Always show scrollbars in iPhone/Android:

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
    border-radius: 10px;  
    background-color: #ffffff; 
}

Its problem is showing the scrollbars everywhere, not just to .table-responsive class. How I can restrict it?

it's by design, read https://github.com/twbs/bootstrap/issues/12877 . Guess your easier way is to add a small message like "scroll table" or whatever — Devin, Sep 11 '14 at 01:08
create a css rule, and add your css code above to that rule eg .scroll-msg ::-webkit-scrollbar... — Tyler Evans, Sep 11 '14 at 02:44

score 15 · Accepted Answer · answered Jan 15 '19 at 18:41

15

Sorry for being 5 years late, but you must add .table-responsive before the pseudo-element, like this:

.table-responsive::-webkit-scrollbar {
    -webkit-appearance: none;
}

.table-responsive::-webkit-scrollbar:vertical {
    width: 12px;
}

.table-responsive::-webkit-scrollbar:horizontal {
    height: 12px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

.table-responsive::-webkit-scrollbar-track {
    border-radius: 10px;  
    background-color: #ffffff; 
}

answered Jan 15 '19 at 18:41

rafael.js

550
6
16

4

You are just in time. – Adam Jan 15 '19 at 19:27
Thanks, However I'll need to rethink the "auto-load" when user scrolls to the bottom of table, else this scrollbar is not easy to use. – htafoya Mar 27 '19 at 03:28

score 4 · Answer 2 · answered Aug 26 '15 at 11:24

4

You can enclose your table with:

<div style="overflow-x:scroll;">

answered Aug 26 '15 at 11:24

Aris

4,643
1
41
38

score 2 · Answer 3 · answered Sep 11 '14 at 19:59

2

If you add overflow-x:scroll to the <768 breakpoint, it will always show the scrollbar below 768px. But as a caveat, it will also show when there is nothing to scroll (i.e. if the table is narrower than 768px)...

@media(max-width:767px){
  .table-responsive{overflow-x:scroll;}
}

answered Sep 11 '14 at 19:59

Shawn Taylor

15,590
4
32
39

1

I tried this in both Firefox and Chrome, to no effect. The rule is not being overridden. What else could it be? – DatsunBing May 27 '15 at 22:19

score 2 · Answer 4 · edited Apr 23 '15 at 15:07

2

Another thing you could do is to use a pseudo element.

.<classname>:before {
    padding: 2px 5px;
    content: "Swipe left to read more";
    color: #fff;
    background: #333;
}

edited Apr 23 '15 at 15:07

Michael Irigoyen

22,513
17
89
131

answered Apr 23 '15 at 14:57

Stacey Schlenker

51
7

Always show scrollbar in Bootstrap table-responsive

4 Answers4