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

由于您对表头之一（关闭标签）使用了无效的语法，因此表变得混乱。我还向weekend_prime = [] weekends = [] weekday_prime=[] def createWeekendData_Jan(): for dayy in range(6,31,7): #all Sat. and Sun. of Jan. day_str = str(dayy) if(len(day_str)==1): day_str = '0'+day_str for hours in range(1,24): hours_str = str(hours) if(len(hours_str)==1): hours_str = ' 0'+hours_str else: hours_str = ' '+hours_str weekends.append('2018-01-'+day_str+hours_str) createWeekendData_Jan() print(weekends)元素中添加了overflow: auto;，当它们可能包含无法容纳在单元格中的元素

td

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

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

1 个答案: