I have a table in this form:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.red {
background-color: red;
}<table>
<thead>
<tr>
<th class="blue">item 1</th>
<th class="green" colspan="2">item 2</th>
<th class="red" colspan="3">item 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>I would like to dynamically add colspan and colors to different th tag in angular 4: In my angular application I have:
.html file
<tr *ngFor="let item of items">
<th>{{ item }}</th>
</tr>
.ts file
items: string[] = ['item 1', 'item 2', 'item 3']
how to add these different colspans and colors (look at the snippet what I want to achieve)? Thank you very much.
