Angular material table with sticky header, problem when using overflow-x

I have the following table

<div class="table-container" #scrollable>
<table mat-table [dataSource]="dataSource" cdkScrollable>
<!-- Definir columnas -->
<ng-container *ngFor="let column of displayedColumns">
<ng-container [matColumnDef]="column">
<th mat-header-cell *matHeaderCellDef>{{ column }}</th>
<td mat-cell *matCellDef="let element">{{ element[column] }}</td>
</ng-container>
</ng-container>

<!-- Filas de datos -->
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>



CSS

.table-container {
width: 100%;
/* overflow-x: auto; */
}

.fixed-header {
position: sticky;
top: 0;
background-color: white;
z-index: 1;
}



Notice how in .table-container css overflow is commented. So far with that sticky header on the table is going to work.

..unless you uncomment the 'overflow-x' fragment inside the table container.

.table-container {
width: 100%;
overflow-x: auto;
}

.fixed-header {
position: sticky;
top: 0;
background-color: white;
z-index: 1;
}



I have a similar scenario and have to add horizontal scrolling inside the table container (only for smaller screens), but by doing that the sticky header of the table isn't staying sticky at the top of the table when doing vertical scroll. Is there any way to achieve this?

Please relate to this stackblitz to see the full example.

Already tried chatGPT to find a solution but that was confusing lol

Continue reading...