Html 表和行跨度

我有一个来自如下服务的数据源

this.ateco2007 = [{code:  this.anagrafica?.ateco2007?.code, description: this.anagrafica?.ateco2007?.description}]

if(this.anagrafica?.atecoSecondari && this.anagrafica?.atecoSecondari.length > 0) {
   let i = 0;
   for(let elem of this.anagrafica.atecoSecondari) {
      this.atecoSecondari.push({
         index: i++,
         code: elem.code,
         description: elem.description
      });
   }

…其中ateco2007始终有一个元素，而atecoSecondari可以有多个值。但总有一对代码/描述

我想在表格中显示这些数据。第一行始终是一行（ateco 2007），其他行可以是多行

我想要一个这样的结构：

第一列将始终使用标签固定，第二列显示代码，最后一列显示说明

我尝试了以下方法，这几乎是正确的：

但我想实现以下目标：

如您所见，有一种行span，在第二列和第三列中，行有边框，并且在同一行中

我尝试了以下代码：

{{'cliente.ateco'| translate}}
{{ateco2007[0]？.code}
{{ateco2007[0]？.description}
{{'cliente.atecoSecondari'| translate}
{{elem.code}
{{elem.description}}

---

但我不知道这是否是构建表格的最佳方式。

我就是这样解决的

 <p-table [value]="ateco2007" [autoLayout]="true">
   <ng-template pTemplate="body" let-rowIndex="rowIndex">
     <tr>
       <td class="font-weight-bold"> {{'cliente.ateco'|translate}}</td>
       <td>{{ateco2007[0]?.code}}</td>
       <td class="text-left">{{ateco2007[0]?.description}}</td>
     </tr>
     <tr *ngFor="let elem of atecoSecondari">
       <td *ngIf="rowIndex == elem.index" [attr.rowspan]="atecoSecondari.length" class="font-weight-bold">
         {{'cliente.atecoSecondari'|translate}}
       </td>
       <td>{{elem.code}}</td>
         <td class="text-left">{{elem.description}}</td>
      </tr>
   </ng-template>
 </p-table>

{{'cliente.ateco'| translate}}
{{ateco2007[0]？.code}
{{ateco2007[0]？.description}
{{'cliente.atecoSecondari'| translate}
{{elem.code}
{{elem.description}}

我添加了行span，并更改了结构