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

Question

我正在尝试创建一个具有固定列宽(每个 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%;
}

Answer 1

表格变得困惑，因为您在其中一个表格标题(结束标记)上使用了无效语法。我还在 td 元素中添加了 overflow: auto; 当它们可能包含无法放入单元格中的元素时

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

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%;
}

<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>fooooooooooooo</td>
        <td>foo</td>
        <td></td>
        <td>foo</td>
        <td></td>
      </tr>
    </div>
  </tbody>
</table>