Bug

Status Update

No update yet.

Description

ch...@google.com

created issue on behalf of da...@gmail.com #1

Mar 5, 2025 11:12AM

Steps to reproduce the problem

Zoom in to 110% - 150%
Press Add Row about 10 times
Scroll down the table

Problem Description

Table cell borders disappear when using "position: sticky" and adding rows to the beginning with tbody.prepend().

<html>
<head>
    <title></title>
    <style>
        #gridContainer {
            height: 300px;
            overflow: auto;
        }

        table {
            border-collapse: separate;
            border-spacing: 0;
            margin: 0;
        }

        table td {
            border-bottom: 1px solid #ccc;
            padding: 7px;
        }

        table td:first-child {
            position: sticky;
            border-right: 1px solid #ccc;
            background-color: white;
            left: 0px;
        }
    </style>
    <script>
        var rowIndex = 0;

        var createRow = (columnCount) => {
        const tr = document.createElement("tr");

        for (let j = 0; j < columnCount; j++) {
            const td = document.createElement("td");
            td.textContent = `test${rowIndex++}${j}`;
            tr.appendChild(td);
        }

        return tr;
        };

        var onButtonClick = function(e) {
        const tbody = document.querySelector("table tbody");
        if (tbody) {
            tbody.prepend(createRow(5));
        }
        };

        document.addEventListener("DOMContentLoaded", () => {
        const createTable = (rowCount, columnCount) => {
            const table = document.createElement("table");
            const tbody = document.createElement("tbody");

            for (let i = 0; i < rowCount; i++) {
            tbody.appendChild(createRow(columnCount));
            }

            table.appendChild(tbody);
            return table;
        };

        const gridContainer = document.getElementById("gridContainer");
        if (gridContainer) {
            gridContainer.appendChild(createTable(2, 5));
        }
        });
    </script>
</head>
<body>
    <div>
        <input type='button' onclick='onButtonClick()' value='Add row' />
        <div id="gridContainer"></div>
    </div>
</body>
</html>

Expected result: Row line thickness is unchanged

Actual result: The row line thickness is changed for random rows

I also created a CodePen that demonstrates the approach: https://codepen.io/duckTie/pen/RNwGvvy?editors=0010

Summary

Sticky Table Cell Borders Disappear When Prepending Rows with tbody.prepend()

Custom Questions

Which component does this fall under?

Blink>CSS

Does this work in other browsers?

Yes - This is just a Chrome problem

Additional Data

Category: API
Chrome Channel: Stable
Regression: N/A

Clipboard-File-2.png

5.3 KB

View

Download

table.html

1.9 KB

View

Download

Comments

sa...@google.com <sa...@google.com> #2Mar 5, 2025 08:02PM

I notice the same issue and LogCat shows the following message:
Google Play services out of date. Requires 3159100 but found 3136130

sa...@google.com <sa...@google.com> Mar 7, 2025 07:19PM

Assigned to ms...@chromium.org.

ms...@chromium.org <ms...@chromium.org> #3Mar 7, 2025 09:50PM

Status: New

Same here.

"Google Play services out of date. Requires 3159100 but found 3136130"

Message last modified on Mar 7, 2025 09:53PM

IssueTracker

This issue is a part of the Chromium tracker.

Sticky Table Cell Borders Disappear When Prepending Rows with tbody.prepend()

Status Update

Description

Steps to reproduce the problem

Problem Description

Summary

Custom Questions

Which component does this fall under?

Does this work in other browsers?

Additional Data

Comments

sa...@google.com <sa...@google.com> #2Mar 5, 2025 08:02PM

sa...@google.com <sa...@google.com> Mar 7, 2025 07:19PM

ms...@chromium.org <ms...@chromium.org> #3Mar 7, 2025 09:50PM

Issue 400863973

Description

Steps to reproduce the problem

Problem Description

Summary

Custom Questions

Which component does this fall under?

Does this work in other browsers?

Additional Data

Issue summary

Comments

sa...@google.com <sa...@google.com> #2Mar 5, 2025 08:02PM

sa...@google.com <sa...@google.com> Mar 7, 2025 07:19PM

ms...@chromium.org <ms...@chromium.org> #3Mar 7, 2025 09:50PM

Add comment

Issue metadata