javascript - how to change css of scrollbar inside table

I am having a horizontal scroll-bar inside a table wrapped inside a div with left column fixed and I want to change its css so that it look like the one in the image.I have tried a few solutions but none of them are working. without effecting the browsers scroll bar. Syle.css:

body {
font:16px Calibri;
}

table {
border-collapse:separate;
border-top:1px solid grey;
}

td {
border-top-width:0;
white-space:nowrap;
margin:0;
}

div {
width:600px;
overflow-x:scroll;
margin-left:5em;
overflow-y:visible;
padding-bottom:1px;
}

.headcol {
position:absolute;
width:5em;
left:0;
top:auto;
border-right:0 none #000;
border-top-width:3px;
margin-top:-3px;
}

.long {
background:#FF0;
}

index.html:

<html>
   <head>
      <link rel="stylesheet" href="style.css"/>
   </head>
   <body>
      <div>
         <table>
            <tr>
               <td class="headcol">2/2/2015</td>
               <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
               <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
               <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
               <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
               <td class="headcol">2/2/2015</td>
               <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
               <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
               <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
               <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
         </table>
      </div>
   </body>
</html>

body {
font:16px Calibri;
}

table {
border-collapse:separate;
border-top:1px solid grey;
}

td {
border-top-width:0;
white-space:nowrap;
margin:0;
}

div {
width:600px;
overflow-x:scroll;
margin-left:5em;
overflow-y:visible;
padding-bottom:1px;
}

.headcol {
position:absolute;
width:5em;
left:0;
top:auto;
border-right:0 none #000;
border-top-width:3px;
margin-top:-3px;
}

.long {
background:#FF0;
}

index.html:

<html>
   <head>
      <link rel="stylesheet" href="style.css"/>
   </head>
   <body>
      <div>
         <table>
            <tr>
               <td class="headcol">2/2/2015</td>
               <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
               <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
               <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
               <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
               <td class="headcol">2/2/2015</td>
               <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
               <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
               <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
               <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
         </table>
      </div>
   </body>
</html>

Share Improve this question asked Nov 5, 2015 at 4:48 Faisal Naseer 4,2582 gold badges39 silver badges56 bronze badges

Hmmm. I'm not quite sure what you are asking. So you want the scrollbars to be styled green??? – Daniel Murphy Commented Nov 5, 2015 at 4:58
try to look at this http://cssdeck./labs/css3-webkit-vertical-scrollbars/ – uno Commented Nov 5, 2015 at 5:02

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

Thanks all of you I have solved my problem.

div::-webkit-scrollbar
{
height:7px;

}
div::-webkit-scrollbar-track
{
    border-radius: 10px;

    webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
div::-webkit-scrollbar-thumb
{
    background-color: a6c53b;


    webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

div::-webkit-scrollbar {
    width: 1em;
    height:10px;
}
 
div::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
}
 
div::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - how to change css of scrollbar inside table - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)