Mostra sempre la barra di scorrimento nella tabella Bootstrap-responsive

Question

Sto usando .table-responsive class per rendere i miei tavoli Bootstrap reattivi e funziona bene ma l'utente non ha alcun indicatore che la tabella sia scorrevole orizzontalmente!

Come è possibile visualizzare sempre la barra di scorrimento orizzontale, non solo dopo che l'utente inizia effettivamente a scorrere.

Modifica

La soluzione qui menzionato quasi funziona: 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; 
} 

suo problema sta mostrando le barre di scorrimento in tutto il mondo, non solo per .table-reattiva di classe. Come posso restringerlo?

Answer 1

Se si aggiunge overflow-x:scroll al punto di interruzione < 768, verrà sempre visualizzata la barra di scorrimento sotto 768px. Ma, come un avvertimento, ma mostrerà anche quando non c'è nulla da scorrere (vale a dire se la tabella è più stretto di 768px) ...

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

Answer 2

Un'altra cosa che potreste fare è quella di utilizzare un elemento pseudo.

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

Answer 3

È possibile racchiudere la vostra tavola con:

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