Adding border in table header Angular Material design

Question

I am trying to add the border on top and bottom in the header of the table, but somehow its not showing it in angular material table.

<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef > No. </th>
    <td mat-cell *matCellDef="let order"> {{order.id}} </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

I use the following CSS

th.mat-header-row {
 border-bottom: 2px solid #ffa600;
 border-top: 2px solid #ffa600;
}

Use !!mportant to overrule materials css. border-bottom: 2px solid #ffa600 !important; — Swoox
– Swoox, Commented Mar 6, 2020 at 13:37
@Mridul Yes i want to have borders like that, can you please tell me how to do that. Thanks — Uahmed
– Uahmed, Commented Mar 6, 2020 at 13:40

Mridul · Accepted Answer · 2020-03-06 16:11:09Z

2

I tried this and it worked on my MatTable

th.mat-header-cell {
border-bottom: 2px solid #ffa600;
border-top: 2px solid #ffa600;
}

answered Mar 6, 2020 at 16:11

Mridul

1,3661 gold badge8 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gangadhar Gandi · Accepted Answer · 2020-03-06 13:45:10Z

1

Below both solutions are working for me. Try these.

table .mat-header-row {
  border-bottom: 2px solid #ffa600;
  border-top: 2px solid #ffa600;
}

OR

::ng-deep .mat-header-row {
  border-bottom: 2px solid #ffa600;
  border-top: 2px solid #ffa600;
}

edited Mar 6, 2020 at 13:45

answered Mar 6, 2020 at 13:21

Gangadhar Gandi

2,26214 silver badges20 bronze badges

Comments

Dan · Accepted Answer · 2020-03-06 14:01:35Z

0

Add a class demo to your HTML like:

<tr mat-header-row class="demo" *matHeaderRowDef="displayedColumns"></tr>

And use the following CSS:

.demo{
    border-bottom: 2px solid #ffa600;
    border-top: 2px solid #ffa600;
}

edited Mar 6, 2020 at 14:01

Dan

63.5k18 gold badges113 silver badges122 bronze badges

answered Mar 6, 2020 at 13:31

Pushprajsinh Chudasama

7,9994 gold badges23 silver badges48 bronze badges

Collectives™ on Stack Overflow

Adding border in table header Angular Material design

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related