[Table] Vertical white lines between headers with a background color when stickyHeader is used

[Tasin5541]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/embed/fmypwn?module=%2Fsrc%2FDemo.tsx
2. Use the latest chrome version - 134.0.6998.89 (Official Build) (64-bit)
3. Notice white line on the left of 'Density' column. If it doesn't show up for you, try changing the size of the preview tab by dragging the middle part. You should at least see flashes of white lines at random places between headers.

Current behavior

This behavior is only noticed on latest version of Chrome and Edge. Firefox seems to be fine.

Currently vertical white lines pop up randomly between headers when stickyHeader is used and there is a background color for the header cells. These lines can change depending on the size of screen and content of the table.

Solution:

1. Remove the stickyHeader prop
2. Add the following to the thead component instead

position: sticky;
top: 0px;
z-index: 2;

I can confirm that this is not specific to my laptop model as this was noticed by another developer in our team with a different laptop as well.

Expected behavior

White lines between headers should not pop up randomly when stickyHeader is used

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: Windows 11 10.0.26100
  Binaries:
    Node: 22.14.0 - ~\AppData\Local\fnm_multishells\25772_1741759258364\node.EXE
    npm: 11.1.0 - ~\AppData\Local\fnm_multishells\25772_1741759258364\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Chromium (134.0.6998.89)
    Edge: Chromium (134.0.3124.51)
  npmPackages:
    @emotion/react: ^11.14.0 => 11.14.0
    @emotion/styled: ^11.14.0 => 11.14.0
    @mui/core-downloads-tracker:  6.4.7
    @mui/icons-material: ^6.4.7 => 6.4.7
    @mui/material: ^6.4.7 => 6.4.7
    @mui/private-theming:  6.4.6
    @mui/styled-engine:  6.4.6
    @mui/system:  6.4.7
    @mui/types:  7.2.21
    @mui/utils:  6.4.6
    @mui/x-date-pickers: ^7.27.3 => 7.27.3
    @mui/x-internals:  7.26.0
    @types/react: ^18.3.18 => 18.3.18
    react: ^18.3.1 => 18.3.1
    react-dom: ^18.3.1 => 18.3.1
    typescript: ^5.8.2 => 5.8.2

Search keywords: table, white lines, stickyHeader

[siriwatknp]

I think it's probably due to the fraction of pixel. I believe this is the browser issue, I don't see how we can fix from our side.
However, the workaround is to add background directly to <tr>.

[Tasin5541]

I think it's probably due to the fraction of pixel. I believe this is the browser issue, I don't see how we can fix from our side. However, the workaround is to add background directly to <tr>.

This same code used to work before the chrome update. All of our prod applications are showing this now. Unfortunately, we can't change that at the moment.

The stickyHeader prop on the table is applied to the header cells. So applying the color on the row would not work as soon as you scroll.

Since the TableCells are white by default, you can see the black row through the cracks