始终在Bootstrap表响应中显示滚动条

Question

我正在使用.table-responsive类来使我的Bootstrap表响应并且它工作正常但是用户没有任何指示表可以水平滚动!

如何使用水平滚动条始终显示,而不仅仅是在用户实际开始滚动之后.

编辑

这里提到的解决方案几乎可行:始终在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; 
}

它的问题是在各处显示滚动条,而不仅仅是响应类.我怎么能限制它？

Answer 1

抱歉迟到了 5 年，但您必须在伪元素之前添加 .table-responsive，如下所示：

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