I am currently working with a matTable that has the first two or three columns set as sticky. However, I am facing an issue where the scrolling behavior of the non-sticky columns under the sticky ones looks like a glitch due to existing border styling on the table:
https://i.stack.imgur.com/hMSMG.png
I would like to apply a unique border style (or any other type of styling) but I am encountering challenges with targeting the headers and body cells separately:
- All column headers share the same list of classes, making it difficult for me to select only the sticky ones:
https://i.stack.imgur.com/6no1Y.png
- The body cells only have 'mat-table-sticky' on the actual sticky columns, allowing me to target them individually. However, using sibling selectors is proving to be tricky when trying to select the last sticky column; 'last-child' and 'last-of-type' selectors do not seem to acknowledge that I specifically want to target the sticky columns.
Does anyone have suggestions on how I can apply a border (or any form of styling) exclusively to the last sticky column?
Edit: Here is the HTML code defining the sticky status:
<ng-container *ngFor="let column of columns">
<ng-container matColumnDef={{column.displayName}} [sticky]="column.sticky"> <!-- column.sticky determines whether a given column is sticky -->
<th mat-header-cell>{{column.displayName}}</th>
</ng-container>
</ng-container>