Столбы мат-таблицы рушатся друг на друга

Question

У меня есть таблица соответствия, чтобы показать корреляцию между ценой и продолжительностью, где поля можно редактировать. Текущий HTML выглядит следующим образом:

  <table mat-table [dataSource]="item.durations_array">
    <ng-container matColumnDef="duration">
      <mat-header-cell *matHeaderCellDef> Duration </mat-header-cell>
      <mat-cell *matCellDef="let element; index as i">
        <mat-form-field floatLabel="never">
          <input
            matInput
            placeholder="Duration"
            disabled="{{ !isEditing }}"
            [value]="item.durations_array[i]"
            [(ngModel)]="item.durations_array[i]"
          />
        </mat-form-field>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="price">
      <mat-header-cell *matHeaderCellDef> Price </mat-header-cell>
      <mat-cell *matCellDef="let element; index as i">
        <mat-form-field floatLabel="never">
          <input
            matInput
            placeholder="Price"
            disabled="{{ !isEditing }}"
            [value]="item.prices_array[i]"
            [(ngModel)]="item.prices_array[i]"
          />
        </mat-form-field>
      </mat-cell>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="['duration', 'price']"></tr>
    <tr mat-row *matRowDef="let element; index as i; columns: ['duration', 'price']"></tr>
  </table>

Проблема в том, что столбцы располагаются друг на друге следующим образом, когда я хочу, чтобы они располагались рядом:

Я пытался включить display: block в таблицу и ячейки, но это не дало эффекта. Я мог бы получить некоторые результаты в инспекторе, отключив flexbox на столе, но я думал, что display:block сделает то же самое?

Answer 1

Исправлено комментарием Eliseo, я забыл определения заголовка и ячейки. Вот рабочий код:

<table mat-table [dataSource]="item.durations_array">
    <ng-container matColumnDef="duration">
      <th mat-header-cell *matHeaderCellDef>Duration</th>
      <td mat-cell *matCellDef="let element; index as i">
        <mat-form-field floatLabel="never">
          <input
            matInput
            placeholder="Duration"
            disabled="{{ !isEditing }}"
            [value]="item.durations_array[i]"
            [(ngModel)]="item.durations_array[i]"
          />
        </mat-form-field>
      </td>
    </ng-container>

    <ng-container matColumnDef="price">
      <th mat-header-cell *matHeaderCellDef>Price</th>
      <td mat-cell *matCellDef="let element; index as i">
        <mat-form-field floatLabel="never">
          <input
            matInput
            placeholder="Price"
            disabled="{{ !isEditing }}"
            [value]="item.prices_array[i]"
            [(ngModel)]="item.prices_array[i]"
          />
        </mat-form-field>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="['duration', 'price']"></tr>
    <tr mat-row *matRowDef="let element; index as i; columns: ['duration', 'price']"></tr>
  </table>