If you see the below code, you'll find out that I've removed the data rows from the first table and header row from the second table. and then added a tableHeader and tableData ids to both table.
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" id="tableHeader"> <ng-container matColumnDef="position"> <th mat-header-cell *matHeaderCellDef> No. </th> </ng-container> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef> Name </th> </ng-container> <ng-container matColumnDef="weight"> <th mat-header-cell *matHeaderCellDef> Weight </th> </ng-container> <ng-container matColumnDef="symbol"> <th mat-header-cell *matHeaderCellDef> Symbol </th> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> </table> <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" id="tableData"> <ng-container matColumnDef="position"> <th mat-header-cell *matHeaderCellDef> No. </th> <td mat-cell *matCellDef="let element"> {{element.position}} </td> </ng-container> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef> Name </th> <td mat-cell *matCellDef="let element"> {{element.name}} </td> </ng-container> <ng-container matColumnDef="weight"> <th mat-header-cell *matHeaderCellDef> Weight </th> <td mat-cell *matCellDef="let element"> {{element.weight}} </td> </ng-container> <ng-container matColumnDef="symbol"> <th mat-header-cell *matHeaderCellDef> Symbol </th> <td mat-cell *matCellDef="let element"> {{element.symbol}} </td> </ng-container> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> Now, we'll get the width of each column from the second table and reflect them in the first to fix the header.
const headerTable = document.querySelector("#tableHeader") const dataTable = document.querySelector("#tableData") /** * Get width of each column named "dataWidths" and * Fix first and last column width by subtraction 24px * as left and right padding was styled into the first and last column of the table * */ const dataWidths = [...dataTable.children[1].children[0].children].map(cell => cell.offsetWidth) dataWidths[0] = dataWidths[0] - 24 dataWidths[dataWidths.length - 1] = dataWidths[dataWidths.length - 1] - 24 const headerColumns = [...headerTable.children[0].children[0].children] headerColumns.map(column => { column.style.width = dataWidths[count] + "px" count++ }) 
Top comments (0)