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

Question

我正在使用.table responsible类使我的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; 
}

它的问题是到处显示滚动条，而不仅仅是对.table响应类。我如何限制它？

Answer 1

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

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

Answer 2

您可以用将表格括起来

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

Answer 3

如果将overflow-x:scroll添加到<768断点，它将始终显示768px以下的滚动条。但需要注意的是，当没有什么可滚动时（即，如果表格窄于768px），它也会显示。。。

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

Answer 4

您可以做的另一件事是使用伪元素。

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