Angular Material table header row change divider colour-CodePudding

I have an issue with styling the Angular Material table - I cannot figure out how to change the divider's color (and thickness) after the header row. I tried to inspect it and play with it in the Chrome dev tools, but I could only change the color of the data rows, not the header (it seems like a border-bottom).

// 1. option
table > th {
  border-bottom: 1px solid red !important;
}

// 2. option
td.mat-cell:first-child {
  border-top: 1px solid #ffa600;
}

// 3. option
body > app-root > div > app-departures > div > transports-table > div > table > thead > tr {
  border-bottom-color: red !important;
}


// This is the code for changing data row divider color
td.mat-cell {
  border-bottom-color: var(--white-grey-row-separator);
  border-top-color: var(--white-grey-row-separator);
}

Do you know how I could change it?

Thanks a lot in advance!

CodePudding user response：

i think that should do the trick for you

table tr:first-child th {
 border-bottom: 1px solid red;
}

that is changing the color right after the header to 1px solid red.

Edit: here is a stackblitz as a tryout: https://stackblitz.com/edit/angular-material-13-starter-x1xj4z-hxrjdn?file=src/app/app.component.css

Peter