CODEWITHSUNDEEP
htmlcssangular-material
user821
user821

Reputation: 73

Removing border in mat table header

I would like to combine mat table headers to get a particular format. i want to remove the top-border of the first header cell of particular header. how can i achieve this. please guide me.

Mat table

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

Upvotes: 2

Views: 1715

Answers (1)

user821
user821

Reputation: 73

I have found solution using css for temporary.

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

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

Upvotes: 3

Related Questions