I am currently working on designing a visually appealing table. Due to the upcoming content in the matrix section, I am unable to make the table smaller for mobile devices. Therefore, I have added overflow:auto to enable a scroll-bar.
The issue I am facing is that the horizontal lines do not extend across the entire table; they are cut off behind the scrollbar.
HTML
<ng-container matColumnDef="module">
<mat-header-cell *matHeaderCellDef [ngClass]="'smallCell'"> Module</mat-header-cell>
<mat-cell *matCellDef="let moduleData" [ngClass]="'smallCell'"> {{moduleData.module}} </mat-cell>
</ng-container>
<ng-container matColumnDef="specialisation">
<mat-header-cell *matHeaderCellDef [ngClass]="'smallCell'"> Spec</mat-header-cell>
<mat-cell *matCellDef="let moduleData" [ngClass]="'smallCell'">
<mat-list dense>
<mat-list-item *ngFor="let specialisation of moduleData.specialisation"> {{specialisation}}</mat-list-item>
</mat-list>
</mat-cell>
</ng-container>
<ng-container matColumnDef="period">
<mat-header-cell *matHeaderCellDef [ngClass]="'smallCell'"> Periode</mat-header-cell>
<mat-cell *matCellDef="let moduleData" [ngClass]="'smallCell'"> {{moduleData.period}} </mat-cell>
</ng-container>
<ng-container matColumnDef="matrix">
<mat-header-cell *matHeaderCellDef [ngClass]="'matrixCell'"> Matrix</mat-header-cell>
<mat-cell *matCellDef="let moduleData" [ngClass]="'matrixCell'"> {{moduleData.matrix}} </mat-cell>
</ng-container>
<ng-container matColumnDef="endRequirements">
<mat-header-cell *matHeaderCellDef [ngClass]="'requirmentCell'"> Eindeisen</mat-header-cell>
<mat-cell *matCellDef="let moduleData" [ngClass]="'requirmentCell'">
<mat-list>
<mat-list-item *ngFor="let requirement of moduleData.endRequirements"> {{requirement}}</mat-list-item>
</mat-list>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
<mat-row *matRowDef="let moduleRowData; columns: displayedColumns;"></mat-row>
</mat-table>
CSS
.table-container{
height: calc(100vh - 114px);
overflow: auto;
}
.requirmentCell{
flex: 0 0 325px;
}
.matrixCell{
flex: 0 0 550px;
}
.smallCell{
flex: 0 0 110px;
}
edit Upon further investigation, it seems that it's not just the border that is being cutoff. Any CSS properties such as background color and headers are also affected.