Currently, I am working on angular 11 and ng-bootstrap 9.1 with the requirement to create a table where the first three columns are fixed and responsive at the same time. While I have managed to make them fixed, achieving responsiveness has been challenging as the UI breaks at certain points.
I understand that this question is similar to others like:
HTML table with fixed headers and a fixed column?
How can I lock the first row and first column of a table when scrolling, possibly using JavaScript and CSS?
How do I create an HTML table with a fixed/frozen left column and a scrollable body?
I am seeking a simple solution such as;
Are there any other methods in angular or ng-bootstrap to achieve this?
Or is there a foolproof way to ensure responsiveness?
No external dependencies are allowed.
Here is the HTML code snippet used in the component to generate the table:
<div class="row mb-2 view" *ngIf="value1.length">
<div class="col-md-12 mb-2 wrapper" style="max-height: 65vh; overflow-y: auto;">
<table class="bg-white roundedCorner table-sm table table-bordered">
<tr class="font-weight-bolder text-monospace" style="background-color: aliceblue; font-size: 1em;">
<th class="text-center align-middle sticky-col check-box" rowspan="2" *ngIf="####" > <input type="checkbox" [(ngModel)]="checkAll" (click)="fnCall($event)"> </th>
<th rowspan="2" class="text-center align-middle sticky-col first-col" [ngStyle]="{'left': lockMode?'80px':'0px'}" style="background-color: aliceblue;"> Chest Number </th>
<th rowspan="2" class="text-center align-middle sticky-col second-col" [ngStyle]="{'left': lockMode?'180px':'100px'}" style="background-color: aliceblue;"> Project Name </th>
<th [attr.colspan]="rubrics.length" class="text-center align-middle"> Rubrics </th>
<th class="text-center align-middle"rowspan="2" style="max-width: 80px;"> Total Mark </th>
<th class="text-center align-middle" rowspan="2"> Remarks </th>
</tr>
<tr class="text-monospace text-center align-middle font-italic font-bold" style="background-color: azure;" >
<th *ngFor="let rubric of rubrics"> {{ rubric.rubricName }} ({{rubric.maxMark}}) </th>
</tr>
</table>
</div>
</div>
CSS code snippet used to achieve fixed positioning:
.view {
margin: auto;
width: auto;
border-collapse: separate;
border-spacing: 0;
}
.wrapper {
position: relative;
overflow: auto;
white-space: nowrap;
}
.sticky-col {
position: -webkit-sticky;
position: sticky;
}
.first-col {
width: 100px;
min-width: 100px;
max-width: 100px;
}
.second-col {
width: 20vw;
min-width: 20vw;
max-width: 20vw;
}
.check-box {
width: 25px;
min-width: 25px;
max-width: 25px;
left: 0px;
}