Scroll bar CSS to a table only

Question

I've created a responsive table CSS and I want a specific CSS to the scroll bar of the table.

But, when inserting this code, the browser scroll bar also changes.

How to specifically use this design to my table?

body {
  padding:1.5em;
  background: #f5f5f5
}

table {
  border: 1px #a39485 solid;
  font-size: .9em;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,.25);
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-radius: 5px;
  overflow: hidden;
}

th {
  text-align: center;
}

thead {
  font-weight: bold;
  color: #fff;
  background: #0088CC;
}

 td, th {
  padding: 1em .5em;
  vertical-align: middle;
}

 td {
  border-bottom: 1px solid rgba(0,0,0,.1);
  background: #fff;
}

a {
  color: #73685d;
}

 @media all and (max-width: 768px) {

  table, thead, tbody, th, td, tr {
    display: block;
  }

  th {
    text-align: right;
  }

  table {
    position: relative; 
    padding-bottom: 0;
    border: none;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
  }

  thead {
    float: left;
    white-space: nowrap;
  }

  tbody {
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    white-space: nowrap;
  }

  tr {
    display: inline-block;
    vertical-align: top;
  }

  th {
    border-bottom: 1px solid #a39485;
  }

  td {
    border-bottom: 1px solid #e5e5e5;
  }


  }

::-webkit-scrollbar {
    width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4); 
}

Please help.

it would be easier to answer if you could make a jsfiddle example :) — Coderbit
– Coderbit, Commented Nov 19, 2014 at 17:01
maybe just use the selector to select the correct scrollbar. Can you give the scrollbar an id? A jsfiddle would be helpful. Or at least the html. — Dan Hogan
– Dan Hogan, Commented Nov 19, 2014 at 17:47

AndrewTet · Accepted Answer · 2014-11-19 19:31:16Z

3

You should be able to target the table scrollbar specifically just like any other css element by putting table before the scorll bar selector. So you could do:

table::-webkit-scrollbar{
    /*Your styles here*/
}
table::-webkit-scrollbar-thumb{
    /*Your styles here*/
}
table::-webkit-scrollbar-thumb:window-inactive{
    /*Your styles here*/
}

Proof of concept here: http://codepen.io/supah_frank/pen/JooNKx

EDIT: Additionally, I've noticed a few weird quirks while playing around with this in chrome (Don't know if it affects other browsers).

First, the css for the scroll bars seems to cache, so make sure to do a hard refresh (ctrl + F5) after changing the css.

Second, even if you are not styling it, you need to target and apply some style to {your element}::-webkit-scrollbar before making any other changes to the scroll bar for an element (I found display: block works if you don't want to really make any changes). If you don't target it, none of the other css on the scroll bar will work for some odd reason.

edited Nov 19, 2014 at 19:31

answered Nov 19, 2014 at 18:57

AndrewTet

1,1828 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ali Akram Over a year ago

Thanks. I had the problem of correctly putting the code before the '::-webkit-scrollbar'. This worked. Thanks.

Collectives™ on Stack Overflow

Scroll bar CSS to a table only

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related