How to change css of scrollbar of table

Question

I want to change style of scrollbar of table but even if i tried lots of way it doesn't change.

I want to change background color, border-radius, width and height properties.

My jsfiddle code: https://jsfiddle.net/gulay/1d73h6yt/5/

I also tried to put class name like this:

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

But it still doesn't work.

One of the what i have tried:

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

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

css code:

.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 code:

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

Usama · Accepted Answer · 2022-04-08 08:36:41Z

3

try this only:

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

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

answered Apr 8, 2022 at 8:36

Usama

1,25315 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to change css of scrollbar of table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related