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），其他行可以是多行。

我想要这样的结构：

第一列总是用标签固定，第二列显示代码，最后一列是描述。

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

但我想实现更接近以下目标：

如您所见，有一种行跨度，在第二列和第三列中，行有边界并且在同一行中。

我尝试了以下代码：

<p-table [value]="ateco2007" [autoLayout]="true">
  <ng-template pTemplate="body">
    <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>
      <td rowspan="atecoSecondari.length" class="font-weight-bold">
        {{'cliente.atecoSecondari'|translate}}</td>
      <td>
        <table>
          <tr *ngFor="let elem of atecoSecondari">
            <td>{{elem.code}}</td>
          </tr>
        </table>
      </td>
      <td>
        <table>
          <tr *ngFor="let elem of atecoSecondari">
            <td class="text-left">{{elem.description}}</td>
          </tr>
        </table>
      </td>
    </tr>
  </ng-template>

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

标签： htmlcssangular

我是这样解决的

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

我添加了行跨度并更改了结构。

html - 表和行跨度

问题描述

解决方案

推荐阅读