数据表上的滚动条样式

Question

如何使用webkit设置特定的数据表格scorllbar？这里是代码：

id ::-webkit-scrollbar-track { 
    background-color: transparent; 
    border-radius: 5px; 
    } 
    id::-webkit-scrollbar { 
     width: 13px; 
    } 
    id::-webkit-scrollbar-thumb { 
    border-radius: 5px; 
    height:40%; 
    background-color: #999999; 

但这种样式从整个项目更改我的整个数据表的滚动条。我已经尝试过一堂课，但仍然没有工作。

请帮

Answer 1

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


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

::-webkit-scrollbar-thumb { 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    background: rgba(192,192,192,0.3); 
    -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); 
} 

Answer 2

滚动条是另一个元素的伪元素。因此，您可以通过定位哪个元素的溢出导致其出现来设置它。

下面是两个不同的滚动两个元素的例子：

.scrollbar-1, 
 
.scrollbar-2 { 
 
    float: left; 
 
    margin-right: 2em; 
 
    width: 10em; 
 
    height: 5em; 
 
    overflow: auto; 
 
} 
 

 
/* Element specific scrollbar styling */ 
 

 
.scrollbar-1::-webkit-scrollbar { 
 
    background: gray; 
 
} 
 
    
 
.scrollbar-1::-webkit-scrollbar-thumb { 
 
    background: red; 
 
} 
 

 
.scrollbar-2::-webkit-scrollbar { 
 
    background: yellow; 
 
} 
 
    
 
.scrollbar-2::-webkit-scrollbar-thumb { 
 
    background: blue; 
 
} 
 

 
/* Common styling for all scrollbars */ 
 

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

 
::-webkit-scrollbar-thumb { 
 
    border-radius: 12px; 
 
    box-shadow: inset 0 0 6px rgba(0,0,0,.5); 
 
} 
 

 
::-webkit-scrollbar-track { 
 
    box-shadow: inset 0 0 6px rgba(0,0,0,.5); 
 
    border-radius: 12px; 
 
}

<div class="scrollbar-1"> 
 
\t Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a risus arcu. Ut tempor laoreet turpis. Curabitur facilisis faucibus massa sit amet imperdiet. Fusce vestibulum sodales egestas. Donec mattis fringilla ante non euismod. Donec ullamcorper odio at ligula maximus ullamcorper. 
 
</div> 
 

 
<div class="scrollbar-2"> 
 
\t Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a risus arcu. Ut tempor laoreet turpis. Curabitur facilisis faucibus massa sit amet imperdiet. Fusce vestibulum sodales egestas. Donec mattis fringilla ante non euismod. Donec ullamcorper odio at ligula maximus ullamcorper. 
 
</div>

但是，你不能滚动条添加到表元素。解决方案可能是将表格封装在div中，并将滚动条样式应用于div，或将样式应用于tbody元素。

HTML：

<div class="scrollbar"> 
    <table> 
     ... 
    </table> 
</div> 

CSS：

.scrollbar::-webkit-scrollbar { ... } 

或HTML：

<table class="table-scrollbar"> 
    <tbody> 
     ... 
    </tbody> 
</table> 

CSS：

.table-scrollbar tbody::-webkit-scrollbar { ... }