如何更改表格內滾動條的css

我有一個表格裏面的水平滾動條，裏面包裹着一個左列固定的div，我想改變它的css，使它看起來像圖像中的那個。我有嘗試了一些解決方案，但他們都沒有工作。而不影響瀏覽器滾動條。 Syle.css：如何更改表格內滾動條的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>

來源

2015-11-05 Faisal Naseer

嗯。我不太確定你在問什麼。所以你想要滾動條被稱爲綠色？ –

試着看看這個[http://cssdeck.com/labs/css3-webkit-vertical-scrollbars/](http://cssdeck.com/labs/css3-webkit-vertical-scrollbars/） – uno

感謝所有的你，我已經解決了我的問題。

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

來源

2015-11-05 05:33:31

如何更改表格內滾動條的css

回答

相關問題