매트 테이블 헤더에서 테두리 제거

질문

특정 형식을 얻기 위해 매트 테이블 헤더를 결합하고 싶습니다. 특정 헤더의 첫 번째 헤더 셀의 상단 테두리를 제거하고 싶습니다. 어떻게 이걸 달성 할 수 있습니까? 저를 안내 해주세요.

매트 테이블

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

답변1

임시로 CSS를 사용하는 솔루션을 찾았습니다.

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

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

 

 

 

 

출처 : https://stackoverflow.com/questions/62017518/removing-border-in-mat-table-header