i'm trying to create a nested table

Question

i need to create a nested table like this:

the number of months and topics and arguments for each topic is variable becouse i take them from db, so i was trying to implement it, and i come out with this solution:

<div class="col-13">
<form  #login (ngSubmit)="onSubmit()" novalidate>
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Figura professionale</th>
                <th>Dipendente</th>
                <th *ngFor="let column of mesi; let k = index">
                    {{column}}
                </th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let row of FigProfs;  let i = index"> 
                <td>{{row.nome}}</td>
                <table>
                    <tr *ngFor="let innerrow of Dips[i];  let k = index">
                        <td>{{innerrow.nome}} {{innerrow.cognome}}</td>
                        
                        <td *ngFor="let column of mesi; let j = index">   
                            <input  id="gd{{row.id}}_{{column}}" name = "gd{{row.id}}_{{column}}" type="number" ng-init="get(row.id,column)=0" [ngModel]="get(row.id,j)" (ngModelChange)="set(row.id,innerrow.id,j,$event)"> 
                        </td>    
                    </tr>
                </table> 
            </tr>
        </tbody>
    </table>
    <button class="btnsubmit" type="submit">AVANTI</button>
</form>

that returns this: as you can see that's not what i need, is there somw way to fix it up? thanks

Answer 1

Here you'll have the blueprint of your table. You can fill it with every variable you want:

<table border="3px">
    <thead>
        <th>topic</th>
        <th>argument</th>
        <th>month1</th>
        <th>month2</th>
        <th>month3</th>
        <th>month4</th>
    </thead>
    <tbody>
        <tr>
            <td>topic 1</td>
            <td>
                <table>
                    <tr>
                        <td>argument 1 of topic 1</td>
                    </tr>
                    <tr>
                        <td>argument 2 of topic 1</td>
                    </tr>
                    <tr>
                        <td>...</td>
                    </tr>
                </table>
            </td>
            <td>
                <table>
                    <tr>
                        <td>month 1 of topic 1</td>
                    </tr>
                    <tr>
                        <td>month 1 of topic 1</td>
                    </tr>
                    <tr>
                        <td>...</td>
                    </tr>
                </table>
            </td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>topic 2</td>
            <td>
                <table>
                    <tr>
                        <td>argument 1 of topic 2</td>
                    </tr>
                    <tr>
                        <td>argument 2 of topic 2</td>
                    </tr>
                    <tr>
                        <td>...</td>
                    </tr>
                </table>
            </td>
            <td>
                <table>
                    <tr>
                        <td>month 1 of topic 2</td>
                    </tr>
                    <tr>
                        <td>month 1 of topic 2</td>
                    </tr>
                    <tr>
                        <td>...</td>
                    </tr>
                </table>
            </td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>