在長長的可滾動桌子上改變水平設計

我在我的博客上展示了一張長桌子，如果我試圖放在一個空間中，看起來真的很笨重，所以我寫了一個小CSS來使桌子水平滾動，就像這樣：在長長的可滾動桌子上改變水平設計

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

現在的問題是，水平滾動正在PC上非常糟糕，就像這樣：

但我希望它看起來像這樣：

通常大多數滾動條在移動設備上顯示的方式。任何人都可以幫我解釋我怎麼能做到這一點？

來源

2016-09-22 iSaumya

可以使用-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/

來源

2016-09-22 13:56:06

嗨，非常感謝您的回答，但它看起來不像它在移動設備上顯示的樣子：http://sitesforprofit.com/wp-content/uploads/2013/09/respt2-m.jpg我的意思是滾動條應該在內容之內，而不是在它之下。不知道你是否明白我的觀點。 – iSaumya

這可以通過將表格封裝在div中來實現（請參閱更新的小提琴）。 –

感謝您的幫助。 – iSaumya

你可以嘗試這樣的事情

<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應用於yoir .table-scroll類即可。

來源

2016-09-22 13:56:17 JaimeGP

你好，謝謝你的回覆，但它應該是這樣的：http://sitesforprofit.com/wp-content/uploads/2013/09/respt2-m.jpg我在一個小提琴上運行你的代碼，它doesn不要那樣看。 – iSaumya

這是我得到的最接近的圖片，https://jsfiddle.net/mc90zx81/ 圖片中的酒吧似乎是半透明的，但我不太欣賞它在圖片中的位置，如果您想讓它半透明， transparent可以使用rga改變顏色（就像我對滾動條的其他部分所做的那樣）。 – JaimeGP

在長長的可滾動桌子上改變水平設計

回答

相關問題