Luôn hiển thị thanh cuộn trong bảng Bootstrap đáp ứng

Question

Tôi đang sử dụng lớp .table-responsive để làm cho bảng Bootstrap của tôi đáp ứng và hoạt động tốt nhưng người dùng không có bất kỳ chỉ báo nào cho thấy bảng có thể cuộn ngang!

Làm cách nào để làm cho thanh cuộn ngang luôn được hiển thị, không chỉ sau khi người dùng thực sự bắt đầu cuộn.

Sửa

Các giải pháp đề cập ở đây hầu hết hoạt động: 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; 
} 

vấn đề của nó là hiển thị các thanh cuộn ở khắp mọi nơi, không chỉ để đáp ứng .table lớp. Làm thế nào tôi có thể hạn chế nó?

Answer 1

Nếu bạn thêm overflow-x:scroll vào điểm dừng < 768, nó sẽ luôn hiển thị thanh cuộn bên dưới 768px. Nhưng như một cảnh báo, nó cũng sẽ hiển thị khi không có gì để di chuyển là (ví dụ: nếu bảng là hẹp hơn 768px) ...

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

Answer 2

Một điều bạn có thể làm là sử dụng một yếu tố giả.

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

Answer 3

Bạn có thể gửi kèm theo bảng của bạn với:

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