Question

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

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

修改

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

它的问题是向各处显示滚动条，而不仅仅是.table-responsive类。我怎么能限制它？

Answer 1

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

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

Answer 2

您可以将表格括在：

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

Answer 3

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

.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 4

如果将overflow-x:scroll添加到＆lt; 768断点，它将始终显示768px以下的滚动条。但作为一个警告，它也会显示什么时候没有任何滚动（即如果表格比768px窄）...

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

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

4 个答案: