Is there an alternative way to fix the content on the header so that it remains visible on the screen until the next table, even when scrolling? I've tried using position: sticky and top: 0, but the header still scrolls past. I have checked for any overflow issues that might be causing this problem but couldn't find any.
<tr>
<ng-container *ngFor="let year of years; let yearIdx=index;">
<th class="table-header" [ngClass]="{'odd': yearIdx % 2 == 1}">
{{year}}
</th>
</ng-container>
</tr>
<ng-container
*ngFor="let equip of getEquip(category); let first=first; let last=last; let index=index;">
<tr>
<ng-container *ngFor="let year of years; let yearIdx = index;">
<td class="table-contents equip-cell">
<ng-container>
<i class="material-icons equip-present">check_circle</i>
<span
*ngIf="getItem(equip.equipment) > 0 && getItems(equip.equipment) < 1">
{{getItem(equip.equipment) | percent: '1.1-1':
'pt'}}
</span>
</ng-container>
<ng-container *ngIf="this.filter.grouping === 'VERSION'">
<i class="material-icons equip-present"
>check_circle</i>
<i class="material-icons equip-not-present"
*ngIf="getItem(equip.equipment)">close</i>
</ng-container>
</td>
</ng-container>
</tr>
</ng-container>
</table>