Always show scrollbar in bootstrap table

Question

I use the .table-responsive class to make my loading tables responsive, and it works fine, but the user has no indicator that the table scrolls horizontally!

How can I make the horizontal scroll bar always be displayed, and not just after the user actually starts scrolling.

Edit

The solution mentioned here almost works: Always show scrollbars on 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; } 

His task displays the scrollbar everywhere, not just the .table-responsive class. How can I limit this?

Answer 1

Another thing you can do is use a pseudo-element.

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

Answer 2

You can make a table:

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

Answer 3

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

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

Answer 4

Sorry for being 5 years late, but you should add .table-responseive 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; }