bug(MatTable): Nested MatTable's rows have no border if I expand last row of parent MatTable

[the-vv]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When I have a nested MatTable set with expand feature, when I expand the last row of the parent table, all the cells in the child MatTable will have no border.

But If I am expanding any other rows except the last row, the nested MatTable is displaying fine.

I have found the reason that the styles from last row .mat-cell of the parent MatTable is being applied to all the child MatTable's .mat-cell

Reproduction

StackBlitz link: https://stackblitz.com/edit/5djdhn?file=src%2Fexample%2Ftable-expandable-rows-example.ts Steps to reproduce:

1. Expand the 1st row of the MatTable and check row borders
2. Expand the last row of the MatTable and checkl the absence of row borders of the rows

Expected Behavior

Only the last row of the nested MatTable will be applied with the border-bottom: none styles. not all the rows

Actual Behavior

Every row inside the last row of MatTable's child MatTable is applied with border-bottom: none styles.

Environment

Angular CLI: 17.0.1 Node: 18.19.0 Package Manager: npm 10.2.3 OS: win32 x64

Angular: 17.0.3 ... animations, common, compiler, compiler-cli, core, forms ... platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1700.1 @angular-devkit/build-angular 17.0.1 @angular-devkit/core 17.0.1 @angular-devkit/schematics 17.0.1 @angular/cdk 17.0.1 @angular/cli 17.0.1 @angular/material 17.0.1 @angular/material-luxon-adapter 17.0.1 @schematics/angular 17.0.1 rxjs 7.8.1 typescript 5.2.2 zone.js 0.14.2

[wagnermaciel]

@andrewseguin Is nesting tables like this supported? I'd imagine this would be a nightmare for a11y

[hallboav]

Same issue here.

[HusFNS]

We have the same issue, is there any sollution? Is this fixed in newer material versions?