Всегда показывать полосу прокрутки в бутстрап-таблице

Я использую класс .table-responsive, чтобы сделать мои загрузочные таблицы отзывчивыми, и он работает нормально, но у пользователя нет индикатора того, что таблица горизонтально прокручивается!

Как я могу сделать горизонтальную полосу прокрутки всегда отображаемой, а не только после того, как пользователь действительно начнет прокрутку.

Edit

Решение, упомянутое здесь, почти работает: Всегда показывать полосы прокрутки в 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; 
}

В его задаче отображается полоса прокрутки везде, а не только класс .table-responsive. Как я могу это ограничить?

Ответы

Ответ 1

Еще одна вещь, которую вы можете сделать, - это использовать псевдоэлемент.

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

Ответ 2

Вы можете заключить таблицу:

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

Ответ 3

Если вы добавите overflow-x:scroll в точку останова < 768, она всегда будет показывать полосу прокрутки ниже 768 пикселей. Но в качестве предостережения он также покажет, когда нечего прокручивать (т.е. Если таблица более узкая, чем 768 пикселей)...

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

Ответ 4

Извините за опоздание на 5 лет, но вы должны добавить .table-responseive перед псевдоэлементом, например так:

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