Bug 271984 – Table cell borders not sticking with their parent sticky elements

• Status: NEW
• Component: Layout and Rendering

[Brandon McConnell]

When a table contains cells inside sticky parent elements, such as thead, tbody, or tfoot, the borders of the cells do not remain stuck to their parent elements when the table is scrolled. This issue is present in all three major browser engines: Chrome/Chromium, Safari/WebKit, and Firefox/Gecko.

The problem appears to be related to how the browsers handle the sticking behavior of cell borders within sticky parent elements. While the parent elements (thead, tbody, or tfoot) correctly stick to the viewport during scrolling, the borders of their child cells do not maintain their position relative to the sticky parent. Instead, the cell borders appear in their original position and only become visible when the table is scrolled to their respective locations.

This bug affects the visual appearance and layout of tables with sticky headers, bodies, or footers, as the cell borders do not consistently stick with their parent elements during scrolling. The issue is not limited to any specific section of the table and can occur in thead, tbody, or tfoot.

#### Steps to reproduce:

1. Create a table with a thead, body (many rows), and a tfoot.
2. Apply the "position: sticky" property to one or more of the thead, tbody, or tfoot elements.
3. Add borders to the cells within the sticky parent elements.
4. Scroll the table to observe the sticky behavior.

Minimal reproduction: https://codepen.io/brandonmcconnell/pen/ZEZaozw/5952a63864a7d7167c788cec6e03b487

#### Expected result:

The borders of the cells within the sticky parent elements should remain stuck to their parent elements during scrolling, maintaining their position relative to the sticky parent.

#### Actual result:

The borders of the cells within the sticky parent elements do not stick with their parent elements during scrolling. They appear in their original position and only become visible when the table is scrolled to their respective locations.

Please find attached screenshots demonstrating the issue in Chrome/Chromium, Safari/WebKit, and Firefox/Gecko.

[Brandon McConnell]

Created attachment 470698 [details]
table border scrolling bug - firefox

[Brandon McConnell]

Created attachment 470699 [details]
table border scrolling bug - safari

[Brandon McConnell]

Created attachment 470700 [details]
table border scrolling bug - chrome

[Brandon McConnell]

Related bugs across major browsers/engines:
- Safari/WebKit: https://bugs.webkit.org/show_bug.cgi?id=271984 (this issue)
- Chrome/Blink: https://issues.chromium.org/issues/332350945
- Firefox/Gecko: https://bugzilla.mozilla.org/show_bug.cgi?id=1888963

[Radar WebKit Bug Importer]

<rdar://problem/126089900>