bug(MatTable): Nested MatTable's rows have no border if I expand last row of parent MatTable
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 8 h
- PR mergées (30 j)
- 91
Description
### 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
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par le point d’entrée StackBlitz situé dans src/example/table-expandable-rows-example.ts et reproduisez le problème en développant d’abord la première ligne, puis la dernière. Examinez comment les lignes MatTable imbriquées reçoivent le style de bordure de la dernière ligne de la table parente. C’est terminé lorsque seule la dernière ligne de la table imbriquée possède border-bottom: none, tandis que les autres lignes enfants conservent leurs bordures.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- angular, typescript
- Domaine
- frontend
- Type d'issue
- Bug
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 42/100