dynamische Tabelle colspan Spalte mit 2 statischen Spalten

Question

Ich brauche etwas Hilfe mit dynamischen HTML-Tabellen.

Was ich erreichen möchte, ist etw. dies wie:

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

Ich habe bereits versucht, einige Dinge, aber meine einzige Lösung sieht wie folgt aus:

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

Und dann rund um die 2 divs zu bauen versucht, ... gibt es eine bessere Lösung? Vielen Dank im Voraus!

Answer 1

Wird colspan aus der zweiten Schleife Arbeit zu entfernen?

<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

können Sie weitere Spalten hinzufügen, indem Sie die correspondind td Zugabe - 1 in der ersten Reihe und 2 in der zweiten Reihe

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>