Table cells don't match with table headings in Angular 7 - html

Question

I am working on a project which requires me to make table using *ngFor directive of Angular. But after several failed attempts I couldn't get the table layout properly . The table cells don't match up with headings and the width of table rows is also not consistent as you can see in the pic . I'm new to Angular and also don't have much experience in debugging css. I think the problem is due to *ngFor directive. Here is the HTML and CSS code snippet. There is *ngIf condition on each td as the table should show the data in a row only when the user clicks it. I'll be very thankful for any help or guidance given.
* {
color: hsla(210, 100%, 100%, 0.9) !important;
background: hsla(210, 100%, 50%, 0.5) !important;
outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;
}
.border {
border: 1px solid #cecece;
}
.heading {
width: 100%;
float: left;
}
th {
background-color: #4CAF50;
color: white;
width: 100px;
}
table {
width: 100%;
}
#container {
width: 98.7%;
height: 300px;
overflow-x: scroll;
overflow-y: scroll;
position: fixed;
}
td {
width: 100px;
}
<table class="table table-bordered table-hover">
<thead class="thead-dark">
<tr>
<th class="text-center">registrationNo</th>
<!--adding heading to criterias using *ngFor -->
<div formArrayName="participants" *ngFor="let candidate of myForm.controls.participants['controls'];let i = index;">
<div [formGroupName]="i">
<div formArrayName="criteriaArray" class="d-inline-block" *ngFor="let criteria of candidate.get('criteriaArray').controls;let j = index;">
<div [formGroupName]="j">
<th *ngIf="(i === 0) && (EditRowId2 !== criteria.get('id').value)" class="text-center" style="width: 100%" (click)="Edit2(criteria.get('id').value)">{{criteria.get('criteriaName').value}}</th>
<th *ngIf="(i === 0) && (EditRowId2 === criteria.get('id').value)" class="text-center" style="width: 100%"><input type="text" formControlName="criteriaName"></th>
</div>
</div>
</div>
</div>
</tr>
</thead>
<tbody>
<tr>
<td>Maximum Marks</td>
<!--adding maximum marks row to the table using *ngFor -->
<div (click)="Edit(0)" formArrayName="participants" *ngFor="let candidate of myForm.controls.participants['controls'];let i = index;">
<div [formGroupName]="i">
<div formArrayName="criteriaArray" class="d-inline-block" *ngFor="let criteria of candidate.get('criteriaArray').controls;let j = index;">
<div [formGroupName]="j">
<td *ngIf="(i === 0) && (EditRowId2 !== criteria.get('id').value)" (click)="Edit2(criteria.get('id').value)">{{criteria.get('max_marks').value}}</td>
<td *ngIf="(EditRowId2 === criteria.get('id').value) && (i===0)"> <input type="number" formControlName="max_marks"> </td>
</div>
</div>
</div>
</div>
</tr>
<div formArrayName="participants" *ngFor="let candidate of myForm.controls.participants['controls'];let i = index;" (click)=Edit2(0)>
<div [formGroupName]="i">
<tr>
<td> {{candidate.get('registrationNo').value}} </td>
<div formArrayName="criteriaArray" class="d-inline-block" *ngFor="let criteria of candidate.get('criteriaArray').controls;let j = index;">
<div [formGroupName]="j">
<td *ngIf="EditRowId === candidate.get('id').value"> <input [class.is-invalid]="criteria.errors?.notValid" type="number" formControlName="marks" (click)="changeButtonColor(i)"> </td>
<td [class.is-invalid]="criteria.errors?.notValid" *ngIf="EditRowId !== candidate.get('id').value" (click)="Edit(candidate.get('id').value)">-----</td>
<small *ngIf="criteria.errors?.notValid" class="text-danger">Invalid marks</small>
</div>
</div>
<button *ngIf="candidate.get('dataSaveCheck').value === true" type="button" value="candidate.get('id').value" class="btn btn-primary btn-sm m-2" (click)="saveCandidateForm(candidate , i )" [disabled]='!userForm.form.valid'>save</button>
<button *ngIf="candidate.get('dataSaveCheck').value === false" type="button" value="candidate.get('id').value" class="btn btn-danger btn-sm m-2" (click)="saveCandidateForm(candidate , i )" [disabled]='!userForm.form.valid'>save</button>
</tr>
</div>
</div>
</tbody>
</table>