In its current state, the data appears as follows without alignment:
https://i.sstatic.net/o5OLu.jpg
The data columns are housed within a single variable due to the presence of multiple excel tabs with varying columns. Within the tr tag, rows are checked to match specific columns.
The HTML Code
<table class="styled-table">
<thead>
<tr id="colNames">
<!-- This table header is kept separate for checkbox in dedicated 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>
... continuing the list of columns and corresponding data entries
</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">
<!-- This table header is kept separate for checkbox in dedicated 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>
... continuing the list of columns and corresponding data entries for completed tasks
</tr>
</tbody>
</table>
The CSS Styling Referenced from the following link, with some modifications:
https://dev.to/dcodeyt/creating-beautiful-html-tables-with-css-428l