bug(COMPONENT): Table border offsets when scrolling up and down

[isaacguo]

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 scrolling down the table, table offsets 1px up

Reproduction

Steps to reproduce:

1. Go to https://material.angular.io/components/table/examples
2. Locate Table with sticky header
3. Set the table css in DevTools border: 1px solid red so that it is easier to notice the issue
4. Scroll down
5. Notice that the table top border also moves up 1px. 6 Scroll all the way down to the bottom
6. Scroll up
7. Notice that the table bottom border also moves down 1px

Expected Behavior

Table border should never offset

Actual Behavior

Border top and bottom offsets 1px down and up along with the scrolling up and down

Environment

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

[leomayer]

You could add for the head some style with

position: sticky;
z-index: 10;

Sounds little bit hacky especially since you already provided a property for being sticky. But at least this fixes this problem. I believe as well that #15885 is somehow related to this issue.

The problem appears as well if you have two rows in the column header. As a base one could use https://stackblitz.com/edit/angular-material-table-multiple-header-rows?file=app%2Ftable-basic-example.css