如何在新行中添加新表?

时间:2017-09-28 14:25:24

标签: html css

我有一张桌子:

<table>
 <tr>
  <td (click)="expend()">aaaa</td>  
  <table>
  <tr><td>bbbb</td></tr>
  </table>
</tr>
</table>

现在我想要的是为该行添加新表,所以在顶部我会有那个tr而下面我会有那个新表。有什么建议吗?

编辑:

这是我的全桌:

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

我想要达到这个目的: aaaaaa-first row    bbbbb - 第二张桌子 ccccc -second row

2 个答案:

答案 0 :(得分:0)

这样的事情?

<table>
 <tr>
  <td (click)="expend()">aaaa</td>   
 </tr>
 <tr>
  <td>
   <table>
    <tr><td>bbbb</td></tr>
   </table>
  </td>
 </tr>
</table>

答案 1 :(得分:0)

添加边框以查看每个表的开始和结束位置......

被修改

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>