iSaumya iSaumya - 2 months ago 8
CSS Question

Changing horizontal design on a long scrollable table

I have a long table to showcase on my blog which looks really clunky if I try to put together in a single space so I wrote a small CSS to make the table horizontally scrollable, like this:

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


Now the problem is that the horizontal scroll is looking very bad on PCs, like this:

enter image description here

But I want it to look like this:

enter image description here

Normally the way most scrollbar shows up on mobile devices. Can anyone help me out about how can I make it happen?

Answer

You can achieve this (for Chrome and Safari) using -webkit-scrollbar and -webkit-scrollbar-thumb:

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

Fiddle: https://jsfiddle.net/ng3fb0gh/1/