表格单元格与Angular 7中的表格标题不匹配

Question

我正在做一个项目，要求我使用Angular的* ngFor指令制作表。但是经过几次失败的尝试之后，我无法获得正确的桌子布局。表单元格与标题不匹配，并且表行的宽度也不一致，正如您在pic中看到的那样。我是Angular的新手，在调试CSS方面也没有太多经验。我认为问题是由于* ngFor指令引起的。这是HTML和CSS代码段。每个td上都有* ngIf条件，因为该表仅在用户单击时才应在一行中显示数据。我将非常感谢您提供的任何帮助或指导。

* {
  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>