Scroll bar CSS to a table only - html

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.

Answer 1

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.