長いスクロールテーブルの水平方向のデザインを変更する

Question

私はブログにショーケースを表示するために長いテーブルを用意していますが、これを1つのスペースにまとめようとすると本当にぎこちないように見えるので、小さなCSSを書いて、 ：

しかし、私はそれは次のようになりたい：：

.table-scroll { 
    margin-bottom: 0; 
    overflow: hidden; 
    overflow-x: scroll; 
    display: block; 
    white-space: nowrap; 
} 

今の問題は、水平スクロールはこのように、PC上で非常に悪い見ているということである

通常、ほとんどのスクロールバーがモバイルデバイスに表示されます。どのように私はそれが起こることができるかについて誰でも助けてくれますか？

Answer 1

あなたが-webkit-scrollbarと-webkit-scrollbar-thumbを使用して（ChromeとSafariのために）これを達成することができます

.table-scroll::-webkit-scrollbar { 
    height: 8px; 
} 
.table-scroll::-webkit-scrollbar-thumb { 
    background: rgba(180, 180, 180, 0.7); 
} 

はフィドル：https://jsfiddle.net/ng3fb0gh/1/

Answer 2

あなたは、これは、すべて変更されます。この

<style type="text/css"> 
::-webkit-scrollbar { 
    width: 6px; 
    height: 6px; 
} 
::-webkit-scrollbar-button { 
    width: 0px; 
    height: 0px; 
} 
::-webkit-scrollbar-thumb { 
    background: #e1e1e1; 
    border: 0px none #ffffff; 
    border-radius: 1px; 
} 
::-webkit-scrollbar-thumb:hover { 
    background: #ffffff; 
} 
::-webkit-scrollbar-thumb:active { 
    background: #000000; 
} 
::-webkit-scrollbar-track { 
    background: #666666; 
    border: 0px none #ffffff; 
    border-radius: 50px; 
} 
::-webkit-scrollbar-track:hover { 
    background: #666666; 
} 
::-webkit-scrollbar-track:active { 
    background: #333333; 
} 
::-webkit-scrollbar-corner { 
    background: transparent; 
} 
</style> 

ような何かを試すことができますスクロールバーで、テーブルのスクロールバーのみを変更する場合は、css to yoir .table-scrollクラスを適用する必要があります。