Удаление границы в заголовке таблицы матов

Question

Я хотел бы объединить заголовки таблицы матов, чтобы получить определенный формат. Я хочу удалить верхнюю границу первой ячейки заголовка конкретного заголовка. как я могу этого добиться. пожалуйста, направьте меня.

Матовый стол

--------------------------------------------------------
|   col1      |      col2          |         col3       |
 --------------------------------------------------------
|             |   a       |     b  |  c    |   d        |
--------------------------------------------------------
|      2      |    9      |     6  |  7     |   8       |
---------------------------------------------------------
|    12      |    19      |    16  | 17     |  18       |
---------------------------------------------------------

--------------------------------------------------------
|             |      col2          |         col3       |
    col1       -------------------------------------------
|             |   a       |     b  |  c    |   d        |
--------------------------------------------------------
|      2      |    9      |     6  |  7     |   8       |
---------------------------------------------------------
|    12      |    19      |    16  | 17     |  18       |
---------------------------------------------------------

 <ng-container>
          <div class="example-container mat-elevation-z8">
            <mat-table [dataSource]="dataSource" matSort>

              <ng-container *ngFor="let column of columns" [matColumnDef]="column.def" sticky>
                <mat-header-cell *matHeaderCellDef>{{ column.header}}</mat-header-cell>
                <mat-cell *matCellDef="let row"  >{{ row[column.def]}}</mat-cell>
              </ng-container>

              <ng-container  *ngFor="let d of col" [matColumnDef]="d" >
                <mat-header-cell *matHeaderCellDef [style.text-align]= " center " [attr.colspan]= "2" >{{d}}</mat-header-cell>
              </ng-container>

              <mat-header-row *matHeaderRowDef="col"></mat-header-row>
              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
              <mat-row *matRowDef="let row; columns: displayedColumns;" >
              </mat-row>

            </mat-table>
          </div>
        </ng-container>

Answer 1

Я нашел решение, используя css для временного использования.

mat-header-cell {
  border-top: 1px solid #e0e0e0;
}

mat-header-cell:nth-child(1){
  border-top: none;
  justify-content: start;
}`