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

【问题标题】：Generating a table with fixed width columns dynamically using Angular使用Angular动态生成具有固定宽度列的表格
【发布时间】：2019-01-30 05:45:17
【问题描述】：

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

【问题讨论】：

标签： css angular html-table

【解决方案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>

【讨论】：