Angular subcomponent separates table header from table rows

Question

Consider the simple Angular 16 project constructed as follows : ng new, followed by ng g c sub (thus creating a new component called sub), modifying the AppComponent class in app.component.ts to become export class AppComponent {indices=[1,2]}, modify the contents of app.component.html file to become

<input type="radio" name="radioGroup" hidden>
<table>
  <tr>
    <th> </th>
    <th>Product Name</th>
    <th>Quantity</th>
  </tr>
  <tr *ngFor="let index of indices">
     <app-sub></app-sub>
  </tr>
</table> 

and finally, modify the contents of sub.component.html file to become

<td><input type="radio" name="radioGroup"></td>
<td>Name</td>
<td>Quantity : 1
<button > + </button>
<button > - </button>
</td>

It would seem (at least to me) that all this should be equivalent to the following HTML file :

<input type="radio" name="radioGroup" hidden>
    <table>
        <tr>
          <th> </th>
          <th>Product Name</th>
          <th>Quantity</th>
        </tr>
        <tr>
          <td><input type="radio" name="radioGroup"></td>
          <td>Name</td>
          <td>Quantity : 
            1
            <button > + </button>
            <button > - </button>
          </td>
        </tr>
        <tr>
          <td><input type="radio" name="radioGroup"></td>
          <td>Name</td>
          <td> Quantity : 1
            <button > + </button>
            <button > - </button></td>
        </tr>
</table> 

But as a matter of fact, the outputs are different on my PC, see below :

The html output in the browser (which is what I want) :

The Angular output in the browser :

Is there some improvement I can make on the Angular code to deal with this ?