My issue lies with implementing ng zorro table and setting position: sticky for the <thead> tag, but it doesn't seem to work.
CSS
.table-fixed thead {
position: sticky !important;
top: 0;
z-index: 999;
background-color: #000;
color: #fff;
}
.table-fixed thead th {
position: sticky !important;
top: 0;
z-index: 999;
background-color: #000;
color: #fff;
}
HTML
template: `
<nz-table #colSpanTable [nzData]="listOfData" nzBordered class='table-fixed'>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th colspan="2">Home phone</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of colSpanTable.data; index as i">
<td>{{ data.name }}</td>
</tr>
</tbody>
</nz-table>
Ensure the table header (thead) remains fixed at the top