CSS 始终在 Bootstrap table-responsive 中显示滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25777374/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Always show scrollbar in Bootstrap table-responsive
提问by Adam Silver
I am using .table-responsive class to make my Bootstrap tables responsive and it's working fine but the user doesn't have any indicator that the table is horizontally scrollable!
我正在使用 .table-responsive 类来使我的 Bootstrap 表具有响应性并且它工作正常但用户没有任何指示表可以水平滚动！
How can I make the horizontal scrollbar always displayed, not only after the user actually starts scrolling.
如何使水平滚动条始终显示，而不仅仅是在用户实际开始滚动之后。
Edit
编辑
The solution mentioned here almost works: Always show scrollbars in iPhone/Android:
这里提到的解决方案几乎有效：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;
}
Its problem is showing the scrollbars everywhere, not just to .table-responsive class. How I can restrict it?
它的问题是到处都显示滚动条，而不仅仅是 .table-responsive 类。我如何限制它？
采纳答案by rafael.js
Sorry for being 5 years late, but you must add .table-responsive before the pseudo-element, like this:
抱歉迟到了 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;
}
回答by Aris
You can enclose your table with:
您可以用以下材料附上您的桌子：
<div style="overflow-x:scroll;">
回答by Stacey Schlenker
Another thing you could do is to use a pseudo element.
您可以做的另一件事是使用伪元素。
.<classname>:before {
padding: 2px 5px;
content: "Swipe left to read more";
color: #fff;
background: #333;
}
回答by Shawn Taylor
If you add overflow-x:scrollto the <768 breakpoint, it will always show the scrollbar below 768px. But as a caveat, it will also show when there is nothing to scroll (i.e. if the table is narrower than 768px)...
如果添加overflow-x:scroll到 <768 断点，它将始终显示 768px 以下的滚动条。但需要注意的是，它也会在没有任何内容可滚动时显示（即，如果表格小于 768 像素）...
@media(max-width:767px){
.table-responsive{overflow-x:scroll;}
}
