2つの静的列を持つ動的表colspan列

Question

動的HTML表で助けが必要です。

私が達成したいのは、sthです。このように：

+----------+-------------+--------------+-----+ 
| Column1 | dynamic col | dynamic col2 | etc | 
|   |-------------+--------------+-----+ 
| rowspan2 | col3 | col4 | col3 | col4 | etc | 
+----------+------+------+------+-------+-----+ 

私はすでにいくつかのことを試してみましたが、私の唯一の解決策は、次のようになります。

<table class="table table-striped table-bordered table-hover"> 
    <thead> 
    <tr> 
     <th rowspan="2">Column1</th> 
     <th colspan="2" *ngFor="let col of columns">dynamic col</th> 
    </tr> 
    <tr> 
     <th colspan="2" *ngFor="let col of columns" > 
     <div style="display: inline-block">col3</div> 
     <div style="display: inline-block">col4</div> 
     </th> 
    </tr> 
    </thead> 
    <tbody> 

    </tbody> 
</table> 

そして2つのdiv arroundの構築しようとし...より良い解決策はありますか？ ありがとうございます！

Answer 1

は、第2のループ作品からはcolspanを削除しますか？

<table class="table table-striped table-bordered table-hover"> 
    <thead> 
    <tr> 
     <th rowspan="2">Column1</th> 
     <th colspan="2" *ngFor="let col of columns">dynamic col</th> 
    </tr> 
    <tr> 
     <th *ngFor="let col of columns"> 
     col{{index}} 
     </th> 
    </tr> 
    </thead> 
    <tbody> 

    </tbody> 
</table> 

Answer 2

あなたはcorrespondind td追加することによって、より多くの列を追加することができます - 最初の行の1をし、2行目の2

td{ 
 
    border: 1px solid black; 
 
}

<table> 
 
    <tr> 
 
    <td rowspan="2">Column1</td> 
 
    <!-- This is the first dynamic column title --> 
 
    <td colspan="2">dynamic col </td> 
 
    <!-- This is the second dynamic column title --> 
 
    <td colspan="2">dynamic col 2</td> 
 
    <!-- add another td for each new column --> 
 
    </tr> 
 
    <tr> 
 
    <!-- This is the first dynamic column content --> 
 
    <td>aaa</td> 
 
    <td>aaa</td> 
 
    <!-- This is the second dynamic column content --> 
 
    <td>aaa</td> 
 
    <td>aaa</td> 
 
    <!-- Add 2 more td for each column --> 
 
    </tr> 
 
</table>