Question

我在一个桌子里面有一个水平滚动条，里面包含一个div，左边的列是固定的，我想改变它的css，使它看起来像是图像中的那个。我尝试了一些解决方案，但没有一个在工作中。不影响浏览器滚动条。 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>

Answer 1

谢谢大家，我已经解决了我的问题。

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

Answer 2

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

如何更改表内滚动条的CSS

2 个答案: