bug(MatTable): Vertical languages rotated and sticky columns

[russelporosky]

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

18

Description

When there are multiple sticky columns and a column has the writing-mode: vertical-lr CSS rule applied (and assuming it is not the last sticky column), the table does not calculate the width of the column correctly. It uses the default horizontal-tb mode to calculate the width and uses that instead, causing subsequent sticky columns to overlap with non-sticky columns and creates a blank space between the column with the vertical-lr rule and the next sticky column.

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-6mfsadjh?file=src%2Fmain.ts,package.json
Steps to reproduce:

1. First two columns are sticky
2. One non-sticky column has width: 100% to force column compression

Expected Behavior

The second column should have a left value that matches the width of the first column.

Actual Behavior

The second column uses unrotated column width as its left value

Environment

• Angular: 19
• CDK/Material: 19
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): MacOS

[vijayanathan23]

Hi, I was curious about Angular and Angular material, thought would contribute here to learn a thing or two!
Went through the Bug, and the code provided. I am assuming the problem is with the 'Symbol' Column from example.

I tried the same component usage in Angular 18 and 17 as well. Looks like the problem is actually with Styling.
.fullwidth {
width: 100%;
}

If, I remove the width: 100%; this is seems to work pretty fine.

Please let me know if am missing something. Or Help me out how I could proceed further in fixing this(Maybe a Hint where I have to look into the code :) )!

Thank you!