使用Angular动态生成具有固定宽度列的表

我试图创建一个固定列宽(每个20%)的数据表。我在我的表中使用div,这样就可以使用angular动态地重复该行。div的引入把我的桌子设计搞砸了。我需要所有的行都要100%地获取,即使其中一列没有值。我还需要做些什么才能得到想要的结果?

<table class="sturdy">
  <thead>
    <div class="test">
      <tr>
          <th>ID<th>
          <th>First Name</th>
          <th>Middle Name</th>
          <th>Last Name</th>
          <th>Date of Birth</th>
        </tr>
    </div>
  </thead>

  <tbody>
    <div class="test" *ngFor="let attribute of attributes">
      <tr>
        <td>{{ attribute[0] }}</td>
        <td>{{ attribute[1] }}</td>
        <td>{{ attribute[2] }}</td>
        <td>{{ attribute[3] }}</td>
        <td>{{ attribute[4] }}</td>
      </tr>
    </div>
  </tbody>
</table>

以下是我的css:

td, th {
    border: 1px solid black;
}

table {
    margin: 15px 0;
    border: 1px solid black;
    table-layout: fixed;
    width: 100%; /* must have this set */
}

body {
    margin: 0 auto;
    padding: 10px;
}

.sturdy th:nth-child(1),
.sturdy th:nth-child(2),
.sturdy th:nth-child(3),
.sturdy th:nth-child(4),
.sturdy th:nth-child(5) {
    width: 20%;
}