如何将colSpan和行Span添加到材料表Header Angular 7中？

Question

我想在rowSpan and colSpan添加Angular material Table header。任何人都可以帮助我实现它。

下面是我想要使用材料表的附加标题

Answer 1

我有像你这样的示例任务。我很容易用第二个标题显示无。

  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef [ngStyle]="{'display': 'none'}"> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

 <!-- first stage header -->
  <ng-container matColumnDef="No">
    <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">No</th>
  </ng-container>

这是我的结果

您可以关注我的链接了解更多信息：StackBlitz

Answer 2

如果要使用colspan和rowspan等本机表功能，则需要使用：

<table mat-table>

  ...

</table>

参考：Native table element tags

例如：

参考：Serendipity CRM