view raw
iSaumya iSaumya - 8 months ago 38
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?


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);