HTML table each row(tr) is having different column(td) numbers

Question

I am creating one table with pure HTML code (i.e. without any 3rd party library or bootstrap) Here is my code : https://stackblitz.com/edit/angular-ivy-rilymn?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.css

I want table structure like this : (not talking about CSS,, HTML structure) enter image description here

but the o/p is not as expected.

Any help would be appreciated!

Answer 1

You have 2 mistakes in your HTML hierarchy.

1. You are wrapping some rows in a div. Try to change this to ng-container in order to not add additional nodes in your DOM, like <ng-container *ngFor="let nameDatas of getMarksData">.
2. You are basically wrapping every row of your table in a dedicated cell, when you have the following code:

...
<tr>
  <td>
    <tr *ngFor="let jj of nameDatas.subMarkData">
...

Try to just remove the tr and td node and you should be fine.