如何更改 table 滚动条的 css

Question

我想更改 table 的滚动条样式，但即使我尝试了很多方法也没有改变。

我想更改背景颜色、边框半径、宽度和高度属性。

我的 jsfiddle 代码：https://jsfiddle.net/gulay/1d73h6yt/5/

我也试过这样写 class 名字：

.tavi-scheduler-table::-webkit-scrollbar-thumb {
      background: #bfbfbf ; 
      border-radius: 10px ;
    }

但是还是不行。

我尝试过的方法之一：

::-webkit-scrollbar-thumb {
  background: #bfbfbf ; 
  border-radius: 10px ;
}
::-webkit-scrollbar:vertical {
  width: 8px ;
}

::-webkit-scrollbar:horizontal {
  height: 8px ;
}
::-webkit-scrollbar-button{
  visibility: collapse ;
}

css代码：

.tavi-scheduler-table{
  z-index: 10; 
  position: absolute; 
  bottom:0; 
  left:0; 
  right:0; 
  background-color: white;  
  max-height: 25%;  
  overflow-y: auto;
}

.table-border-top{
  border-top: 3px solid #dee2e6;
}

.close-table-button{
  margin-top: 0%;
}

html代码：

<div class="tavi-scheduler-table" *ngIf="isTableOpen">
    <table class="table table-bordered">
      <thead class="table-border-top">
        <tr>
          <th scope="col">{{'report.tavi.tavicalendar.calendar_date'| translate}}</th>
          <th scope="col">{{'report.tavi.tavicalendar.driver_plate'| translate}}</th>
          <th scope="col">{{'report.tavi.tavicalendar.process'| translate}}</th>
          <th scope="col">{{'report.tavi.tavicalendar.status'| translate}}</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let evn of eventsData"
          [ngClass]="{'scCls': evn.is_past && evn.status, 'failCls': evn.is_past && !evn.status}">
          <td>{{evn.start_text}}</td>
          <td>{{evn.title}}</td>
          <td>{{evn.operation_text}}</td>
          <td>{{evn.status_text}}</td>
        </tr>
      </tbody>
    </table>

  </div>

Answer 1

只尝试这个：

 ::-webkit-scrollbar {
    width: 10px;
    height: 8px
 }

 ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #6d6d6d;
}

如何更改 table 滚动条的 css

How to change css of scrollbar of table

html

css

scrollbar