'Border around sticky matColumn in matTable

I have a matTable with the first two or three columns sticky. The problem is, due to the border styling already in place for the table, the area where the non-sticky columns scroll under the sticky columns looks like a glitch instead of sticky behavior:

Sticky column loses 3D effect from matching column border when scrolled under

I want to add a unique border style (or any type of style, really), but I am running into opposite problems for the headers and the body cells:

  1. All the column headers have the exact same list of classes, so I am unable to write a selector that will select only the sticky ones:

mat-table-sticky on both sticky and non-sticky columns

  1. The body cells only have mat-table-sticky on the actual sticky columns, so I can select them, but since the sibling selectors only select siblings after a given sibling, I can't select the last sticky column; last-child and last-of-type also don't appear to care that I'm just looking at the sticky columns.

Any suggestions for how I might put a border (or any styling at all) on only the last sticky column?

Edit: HTML code setting 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>
csshtml-tablecss-selectorsstickysiblings


Solution 1:[1]

i think nth-child will solve your problem th:nth-child(x)

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

body{
    display: grid;
    place-content: center;
    position: relative;
}

th{
  margin-right:1rem;
}


.first-table th:nth-child(4){
  color:blue;
}
<table>
      <tr class="first-table">
        <th class="mat-sticky">Savings</th>
        <th class="mat-sticky">Savings</th>
        <th class="mat-sticky">Savings</th>
        <th class="mat-sticky">4th child</th>
        <th class="mat-sticky">Savings</th>
        <th class="mat-sticky">Savings</th>
        <th class="mat-sticky">Savings</th>
      </tr>

      <tr class="second-table">
        <th class="mat-sticky">Savings</th>
        <th class="mat-sticky">Savings</th>
        <th class="mat-sticky">Savings</th>
        <th class="mat-sticky">Savings</th>
        <th class="mat-sticky">Savings</th>
        <th class="mat-sticky">Savings</th>
        <th class="mat-sticky">Savings</th>
      </tr>
</table>

Solution 2:[2]

I ended up calling a function from each cell that looks at the next column and returns a sticky-edge class if the column is on the edge:

<ng-container *ngFor="let column of columns; let i = index">
  <ng-container matColumnDef={{column.displayName}} [sticky]="column.sticky"> <!-- column.sticky determines whether a given column is sticky -->
    <th mat-header-cell [class]="getStickyEdgeClass(i)">{{column.displayName}}</th>
  </ng-container>
</ng-container>

getStickyEdgeClass(index: number){
  if (columns.length > index + 1 && columns[index].sticky && !columns[i + 1].sticky)
    return "sticky-edge";
  else
    return "";
}

.sticky-edge {
  border-right-color: black;
}

It would have been nice to be able to do this with pure css, but I guess if you can't, you can't. Still hoping someone might show me a way that you can.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Trevortni

Related Questions