Css 始终在引导表中显示滚动条

我正在使用.table responsive类使我的引导表具有响应性，它工作正常，但是用户没有任何指示器表明该表是水平滚动的

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

编辑

这里提到的解决方案几乎是可行的：

---

它的问题是到处显示滚动条，而不仅仅是向.table响应类显示滚动条。我怎样才能限制它

如果将

overflow-x:scroll

添加到中，可以做的另一件事是使用伪元素

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

：之前{
填充物：2px 5px；
内容：“向左滑动可阅读更多内容”；
颜色：#fff；
背景：#333；
}

您可以将以下物品附在桌子上：

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

---

很抱歉迟到了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; 
}

---

你在OS X上看到了吗？@alex OS X和Android。这是设计的，请阅读。我猜更简单的方法是添加一条小消息，比如“scroll table”或whateverTry overflow-x:scroll创建一个css规则，然后将上面的css代码添加到该规则中，例如scroll msg:：-webkit scrollbar…我在Firefox和Chrome中都尝试过了，但没有效果。规则没有被覆盖。还可能是什么？你来得正是时候。谢谢，但是当用户滚动到表格底部时，我需要重新考虑“自动加载”，否则这个滚动条不容易使用。

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

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