html - css 样式表格作为比例尺

Question

我有一个 for 循环，它应该如下图所示填充一个表:

年龄是在表头的第一行，然后是三行，每行三列。第一行包含图像，第二行只是一条水平线(不能是一行，可以是前一行的底部边框)，第三行是数字比例，即 18-29、30-50、50+。

我的 HTML:

<table >
    <tr>
        <td>Age</td>
    </tr>
    <tr *ngFor="let age of age_range">
        <td>{{age}}</td>
    </tr>
</table>

和CSS:

table , tr {
    border-bottom: 1px solid;
}

如何将 css 应用于它以使其看起来像图中所示？现在我喜欢以下内容:

Answer 1

应该是这样的

<table >
<tr>
    <td colspan="3">Age</td>
</tr>
<tr>
    <td *ngFor="let age of age_range">{{age}}</td>
</tr>

如果你不知道确切的列号你可以使用age_range.length，在Angularjs中它是这样完成的 colspan="{{age_range.length}}" ，它可能是相同的在 Angular 2 中。

.border-bottom {border-bottom: 1px #ccc solid;}
table {width: 100%;}

<table>
  <tr>
    <td colspan="3">Age</td>
  </tr>
  <tr>
   <td class="border-bottom">11111</td>
   <td class="border-bottom">22222</td>
   <td class="border-bottom">33333</td>
  </tr>
</table>