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中可能是相同的

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;