Is there a way to maintain the table style of an Angular Material table while using a custom scrollbar with a transparent background?
Currently, the issue arises when the scrollbar has an extended width, causing the table style to disappear.
https://i.sstatic.net/n3KvL.jpg
HTML:
<div class="container-list">
<mat-table mat-table [dataSource]="dataSource" matSort>
<!-- ... insert basic table definition (like here: https://material.angular.io/components/table/examples#table-basic) ... -->
</mat-table>
</div>
CSS (custom scrollbar):
.container-list {
overflow: auto;
height: 500px;
}
.container-list::-webkit-scrollbar {
width: 30px;
height: 8px;
border-radius: 30px;
background-color: transparent
}
.container-list::-webkit-scrollbar-thumb {
border-radius: 30px;
background-color: black;
}
.container-list::-webkit-scrollbar-button,
.container-list::-webkit-scrollbar-track,
.container-list::-webkit-scrollbar-track-piece,
.container-list::-webkit-scrollbar-corner,
.container-list::-webkit-resizer {
display: none;
}
.container-list::-webkit-scrollbar-track-piece:start {
margin-top: 450px;
}
The only solution I've come across is to hide the entire scrollbar, but that is not the desired outcome.
.container-list::-webkit-scrollbar {
display: none;
}
It is also essential to keep the mat-header-row fixed (the row containing column names) so that it remains visible while scrolling. This can be achieved using sticky.