How to add new table inside tr in new line? - html

Question

I have one table:
<table>
<tr>
<td (click)="expend()">aaaa</td>
<table>
<tr><td>bbbb</td></tr>
</table>
</tr>
</table>
Now what i want is to add new table for that row so on top i will have that tr and bellow i will have that new table. Any suggestion?
EDIT:
This is my full table:
<table class="custom-table">
<tr dnd-draggable [dragData]="sa" (onDragStart)="dnd.set(true);" (onDragEnd)="dnd.set(false)" *ngFor="let sa of customerGeneralInfo?.serviceAccount" (click)="sa?.accountclassCode=='SAGG' ? getSAGG(sa.p_SA_ID):getServiceAccount(sa.p_SA_ID,'CA');addToHistory('CA')">
<td>{{sa?.p_SA_ID}}</td>
<td>{{sa?.address}}</td>
<td *ngIf="sa?.accountclassCode=='SAGG'">{{sa?.accountclassCode}}</td>
<td style="display:block">
<table *ngIf="saggInfo?.serviceAccount?.length > 0">
<tr *ngFor="let saggsa of saggInfo?.serviceAccount">
<td>
{{saggsa?.p_SA_ID}}
</td>
<td>
{{saggsa?.address}}
</td>
</tr>
</table>
</td>
</tr>
</table>
What i want to achive to have this:
aaaaaa -first row
bbbbb - second table
ccccc -second row

Answer 1

something like this?
<table>
<tr>
<td (click)="expend()">aaaa</td>
</tr>
<tr>
<td>
<table>
<tr><td>bbbb</td></tr>
</table>
</td>
</tr>
</table>

Answer 2

Added borders to see where each table begins and ends...
Edited
table {
border: 1px solid #aaa;
}
<table class="custom-table">
<tr dnd-draggable [dragData]="sa" (onDragStart)="dnd.set(true);" (onDragEnd)="dnd.set(false)" *ngFor="let sa of customerGeneralInfo?.serviceAccount" (click)="sa?.accountclassCode=='SAGG' ? getSAGG(sa.p_SA_ID):getServiceAccount(sa.p_SA_ID,'CA');addToHistory('CA')">
<td>{{sa?.p_SA_ID}}</td>
<td>{{sa?.address}}</td>
<td *ngIf="sa?.accountclassCode=='SAGG'">{{sa?.accountclassCode}}</td>
</tr>
<tr>
<td colspan="3">
<table *ngIf="saggInfo?.serviceAccount?.length > 0">
<tr *ngFor="let saggsa of saggInfo?.serviceAccount">
<td>{{saggsa?.p_SA_ID}}</td>
<td>{{saggsa?.address}}</td>
</tr>
</table>
</td>
</tr>
</table>