Наличие таблиц внутри NgFor с одинаковой высотой

Question

У меня есть ngFor, который будет повторять для меня количество таблиц. В моем случае 3 (не stati c) таблицы будут сгенерированы с помощью ngFor, который я использую, а внутри таблицы у меня есть строки, которые должны быть сгенерированы. Использование другого ngFor, но теперь проблема в том, что если у моего первого файла меньше данных, скажем, 2 строки данных, а у моей третьей таблицы 6 строк данных, то высота таблиц не постоянна. Ожидаемое решение: все таблицы должны иметь одинаковую высоту, если таблица 3 имеет 6 строк, то таблица 1 и таблица 2 также должны иметь 6 строк. Давайте оставим строки в состоянии c, я имею в виду независимо от данных, каждая таблица должна быть в состоянии показать 6 строк. если в таблице 2 есть данные для 2 строк, то оставшиеся 4 строки должны быть пустыми.

<div
class="shift-table"
[ngClass]="{ disablePreviousRecord: isPreviousWeekRecord }"
[attr.disabled]="isPreviousWeekRecord"
>
<div class="shift-name " *ngFor="let roster of rosterInfo">
<span>Shift - {{ roster.shiftName }}</span>

<table
  class="table scrollbar"
  id="customScrollDiv"
  style="background-color: white; color:#EBF4FF"
>
  <thead style="background-color: #9AA7C7;">
    <tr class="header">
      <th>
        Copy
      </th>
      <th>
        Person Name
      </th>
      <th>
        Role
      </th>
    </tr>
  </thead>
  <tbody class="text-black-50">
    <tr class="dataRow" *ngFor="let user of roster.userDetails">
      <td>
        <input type="checkbox" [disabled]="isPreviousWeekRecord" />
      </td>
      <td>
        {{ user.userId }}
      </td>
      <td>
        <span *ngFor="let role of user.roles; let i = index">
          {{ role }} {{ i === user.roles.length - 1 ? '' : ',' }}
        </span>
      </td>
    </tr>
  </tbody>
</table>