如何在HTML表格中实现动态列数据与动态行数据的对齐？

目前未做对齐处理时，数据显示效果如下：

由于存在多个列结构各不相同的Excel标签页，列通过单个变量统一调用，在另一tr标签中会校验行数据与对应列的匹配关系。 #

<table class="styled-table">
    <thead>
        <tr id="colNames">
            <!-- Keep this table header because it makes the checkbox in its own column -->
            <th>
            </th>
            <th *ngFor="let column of tabColumnsForTable">
                {{column}}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let row of toDoTasks; let i = index" id="taskList" class="active-row">
            <td class="divTd">
                <label>
                    <mat-checkbox (change)="moveTabTaskToDone(row, i)"
                        [(ngModel)]="checkboxesForToDo[i]">
                    </mat-checkbox>
                </label>
            </td>
            <div class="divTd" *ngIf="row.qty">
                <td [ngClass]="{'crossOut': checkboxesForToDo[i]}">{{row.qty}}</td>
            </div>
            <div class="divTd" *ngIf="row.vendor">
                <td [ngClass]="{'crossOut': checkboxesForToDo[i]}">{{row.vendor}}</td>
            </div>
            <div class="divTd" *ngIf="row.name_type">
                <td [ngClass]="{'crossOut': checkboxesForToDo[i]}">{{row.name_type}}</td>
            </div>
            <div class="divTd" *ngIf="row.style">
                <td [ngClass]="{'crossOut': checkboxesForToDo[i]}">{{row.style}}</td>
            </div>
            <div class="divTd" *ngIf="row.component">
                <td [ngClass]="{'crossOut': checkboxesForToDo[i]}">{{row.component}}</td>
            </div>
            <div class="divTd" *ngIf="row.material">
                <td [ngClass]="{'crossOut': checkboxesForToDo[i]}">{{row.material}}</td>
            </div>
            <div class="divTd" *ngIf="row.height">
                <td [ngClass]="{'crossOut': checkboxesForToDo[i]}">{{row.height}}</td>
            </div>
            <div class="divTd" *ngIf="row.width">
                <td [ngClass]="{'crossOut': checkboxesForToDo[i]}">{{row.width}}</td>
            </div>
            <div class="divTd" *ngIf="row.depth">
                <td [ngClass]="{'crossOut': checkboxesForToDo[i]}">{{row.depth}}</td>
            </div>
            <div class="divTd" *ngIf="row.edgeBanding">
                <td [ngClass]="{'crossOut': checkboxesForToDo[i]}">{{row.edgeBanding}}</td>
            </div>
            <div class="divTd" *ngIf="row.insetCarvings">
                <td [ngClass]="{'crossOut': checkboxesForToDo[i]}">{{row.insetCarvings}}</td>
            </div>
            <div class="divTd" *ngIf="row.name">
                <td [ngClass]="{'crossOut': checkboxesForToDo[i]}">{{row.name}}</td>
            </div>
            <div class="divTd" *ngIf="row.total_calc_area">
                <td [ngClass]="{'crossOut': checkboxesForToDo[i]}">{{row.total_calc_area}}</td>
            </div>
            <div class="divTd" *ngIf="row.linears">
                <td [ngClass]="{'crossOut': checkboxesForToDo[i]}">{{row.linears}}</td>
            </div>
            <div class="divTd" *ngIf="row.length">
                <td [ngClass]="{'crossOut': checkboxesForToDo[i]}">{{row.length}}</td>
            </div>
            <div class="divTd" *ngIf="row.thickness">
                <td [ngClass]="{'crossOut': checkboxesForToDo[i]}">{{row.thickness}}</td>
            </div>
        </tr>
    </tbody>
</table>
</div>
</mat-tab>
<mat-tab label="Done">
<mat-checkbox class="checkMarkAll" (change)="markAllTasksAsToDo()" [(ngModel)]="markAllToDo">
    Mark all as to do
</mat-checkbox>
<div id="taskList">
    <table class="styled-table">
        <thead>
            <tr id="colNames">
                <!-- Keep this table header because it makes the checkbox in its own column -->
                <th>
                </th>
                <th *ngFor="let column of tabColumnsForTable">
                    {{column}}
                </th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let row of doneTasks; let i = index" id="taskList" class="active-row">
                <td class="divTd">
                    <label>
                        <mat-checkbox (change)="moveTabTaskTo_ToDo(row, i)"
                            [(ngModel)]="checkboxesForDone[i]">
                        </mat-checkbox>
                    </label>
                </td>
                <div class="divTd" *ngIf="row.qty">
                    <td>{{row.qty}}</td>
                </div>
                <div class="divTd" *ngIf="row.vendor">
                    <td>{{row.vendor}}</td>
                </div>
                <div class="divTd" *ngIf="row.name_type">
                    <td>{{row.name_type}}</td>
                </div>
                <div class="divTd" *ngIf="row.style">
                    <td>{{row.style}}</td>
                </div>
                <div class="divTd" *ngIf="row.component">
                    <td>{{row.component}}</td>
                </div>
                <div class="divTd" *ngIf="row.material">
                    <td>{{row.material}}</td>
                </div>
                <div class="divTd" *ngIf="row.height">
                    <td>{{row.height}}</td>
                </div>
                <div class="divTd" *ngIf="row.width">
                    <td>{{row.width}}</td>
                </div>
                <div class="divTd" *ngIf="row.depth">
                    <td>{{row.depth}}</td>
                </div>
                <div class="divTd" *ngIf="row.edgeBanding">
                    <td>{{row.edgeBanding}}</td>
                </div>
                <div class="divTd" *ngIf="row.insetCarvings">
                    <td>{{row.insetCarvings}}</td>
                </div>
                <div class="divTd" *ngIf="row.name">
                    <td>{{row.name}}</td>
                </div>
                <div class="divTd" *ngIf="row.total_calc_area">
                    <td>{{row.total_calc_area}}</td>
                </div>
                <div class="divTd" *ngIf="row.linears">
                    <td>{{row.linears}}</td>
                </div>
                <div class="divTd" *ngIf="row.length">
                    <td>{{row.length}}</td>
                </div>
                <div class="divTd" *ngIf="row.thickness">
                    <td>{{row.thickness}}</td>
                </div>
            </tr>
        </tbody>
    </table>

参考公开的CSS美化HTML表格教程做了部分调整。 #

内容的提问来源于stack exchange，提问作者Kirtan Parekh