How to prevent rotated mat-table headers from being overlapped by adjacent columns?

In my Angular app, I’m using mat-table with some long column names. To improve readability, I applied a rotate(-30deg) transformation to the header labels. However, this causes the labels to be overlapped by the next column’s div, instead of appearing on top.

I tried setting the parent z-index to 1 and the span's z-index to 99, but with no success.

How can I ensure that the rotated headers are properly displayed above adjacent columns?

<table
mat-table
[dataSource]="dataSource"
multiTemplateDataRows
class="mat-elevation-z0"
>
<ng-container *ngFor="let column of displayedColumns" [matColumnDef]="column">
<th mat-header-cell *matHeaderCellDef class="header-class">
<span class="rotated-span">
{{ column }}
</span>
</th>
<td mat-cell *matCellDef="let element">
{{ element[column] }}
</td>
</ng-container>

<!-- Header and Row -->
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>


.rotated-span {
position: absolute;
height: 10px;
transform: rotate(-30deg);
transform-origin: center left;
white-space: nowrap;
z-index: 99 !important;
}

.header-class {
height: 100px;
background-color: white;
z-index: 1 !important;
}


https://stackblitz.com/edit/angular-bbt4zr1j

Continue reading...