I’ve created a custom element that mimics c#’s datagridview. I was able to make the <thead> stick at the top like dot net’s listview or datagridview header until just recently I noticed it doesn’t work anymore.

Everything in this custom element are programmatically generated including the CSS rules. Here’s the code to generate the CSS rules:

class ListView extends HTMLElement {
    static #lvwId = null;
    static #lvwCss;
    static #initId() {
        if (ListView.#lvwId == null) {
            ListView.#lvwId = '-lvw-' + Array.from(Date.now().toString()).map(b => ('00' + b.toString(16)).slice(-2)).join('');
            ListView.#lvwCss = ListView.#lvwId + '-css';
        }
    }
    connectedCallback() {
        ListView.#initId();
        let style = document.getElementById(ListView.#lvwId);
        if (style == null) {
            ListView.#style = style = document.createElement('style');
            style.type = 'text/css';
            style.id = ListView.#lvwId;
            const fn = (...b) => {
                if (b.length == 1) {
                    let c = b[0];
                    let d = '.' + ListView.#lvwCss;
                    if (c[0] == '-')
                        c = c.substr(1);
                    else
                        d += ' ';
                    d += c;
                    ListView.#style.appendChild(document.createTextNode(d));
                }
                else {
                    let c = '';
                    for (let d of b[0]) {
                        if (c != '') c += ',';
                        c += '.' + ListView.#lvwCss + ' ' + d;
                    }
                    ListView.#style.appendChild(document.createTextNode(c + ' ' + b[1]));
                }
            };
            fn('{position:relative;background-color:white;outline:none;display:block;overflow:auto;}');
            fn('*{user-select:none;box-sizing:border-box;position:relative;padding:0px;margin:0px;background-color:transparent;color:inherit}');
            fn('{--gridcolor:lightgray;--xmargins:5px;--itembackcolor:white;--itemforecolor:black;--headerbackcolor:gray;--headerforecolor:black;--headerhoverback:forestgreen;--headerhoverfore:black;--headerpadding:4px;--itempadding:4px;}');
            fn('table{border-collapse:collapse;z-index:0;left:0px;top:0px;background:white;table-layout:fixed;display:block}');
            fn('thead{position:sticky;top:0px;z-index:3}');
            fn('thead>tr{position:sticky}');
            fn(['th', 'td'], '{text-align:left;vertical-align:top;}');
            fn('th{position:sticky;top:-1px;background-color:var(--headerbackcolor);color:var(--headerforecolor);border-right:1px solid var(--gridcolor);transition:background-color .5s}');
            fn('-:not([headeronly]) th{cursor:pointer;}');
            fn('-:not([headeronly]) th:hover{background-color:var(--headerhoverback);color:var(--headerhoverfore)}');
            fn(['th>div', 'td>div'], '{height:100%;display:flex;flex-direction:row;justify-content:flex-start;align-content:flex-start;align-items:flex-start}');
            fn('th>div{margin-left:var(--xmargins);padding: var(--headerpadding) var(--xmargins) var(--headerpadding) 0px;}');
            fn('th>div>p{width:100%}');
            fn('td{background:var(--itembackcolor);color:var(--itemforecolor);}')
            fn('th::after{content:"";width:var(--xmargins);position:absolute;right:0px;top:0px;height:100%;cursor:ew-resize}')
            fn('th:not(:first-child)::before{content:"";width:var(--xmargins);position:absolute;left:0px;top:0px;height:100%;cursor:ew-resize}')
            fn('td>div{padding:var(--xmargins) var(--itempadding);width:100%;}');
            fn('td>div>p>img{float:left;margin-right:5px}');
            fn('td>input{height:100%;width:100%;outline:0px solid transparent;border:none;padding:1px;background:white;color:black;}');
            fn('td{color:black}');
            fn('tr[selected]{background:#018;color:white}');
            fn('tr[selected]>td:not([selected]){background:transparent;color:white}');
            fn('tr[selected]>td[selected]{background:rgba(255,255,255,.2);}');
            fn('tbody>tr:nth-child(even){--bg-color:rgba(0,0,0,.05)}');
            fn('tbody>tr:nth-child(even) td{background-color:var(--bg-color);}');
            fn('.sticky-hdr{position:sticky;overflow:hidden;z-index:1;top:0px;width:100%}');
            fn('tbody>tr{border-bottom:1px solid var(--gridcolor);color:black}');
            fn('.splits{border-top:1px solid var(--gridcolor)}');
            fn('tbody>tr>td p{outline:none;width:100%;}');
            fn('tbody td{border-right:1px solid var(--gridcolor)}');
            fn('-[nogrid] tbody * {border-color:transparent}');
            fn('-[nogrid] tbody>tr:nth-child(even)>td{border-color:var(--bg-color)}');
            fn('-[nowrap] p{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}');
            fn('-[checkboxes] td>div>div[checkbox]{float:left;border:1px solid gray;margin-right:5px;width:16px;height:16px;background:white}')
            fn("-[checkboxes] td>div>div[checkbox="checked"]::after{content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0' y='0' viewbow='0 0 16 16'%3E%3Cpath fill='black' d='M4,9l0,-3l3,3l5,-5,l0,3l-5,5Z' /%3E%3C/svg%3E");width:16px;height:16px;position:absolute;left:-1.5px;top:-1px}");
            document.body.insertAdjacentElement('beforebegin', style);
        }
        this.tabIndex = $(this).index();
        $(this).addClass(ListView.#lvwCss);
        this.#headerPlaceholder = document.createElement('div');
        this.#headerPlaceholder.setAttribute('style', 'width:100%;height:32px;overflow:none;position:sticky;left:0px;top:0px;background:gray');
        this.#headerPlaceholder.innerHTML = ' ';
        this.append(this.#headerPlaceholder);
        this.#table = document.createElement('table');
        this.#table.style.top = '0px';
        this.#thead = document.createElement('thead');
        this.#table.appendChild(this.#thead);
        this.#tbody = document.createElement('tbody');
        this.#table.appendChild(this.#tbody);
        this.#header = document.createElement('tr');
        this.#table.firstChild.insertAdjacentElement('afterbegin', this.#header);
        $(this).append(this.#table);

        this.#handleEvents();
        this.#handleHeaderEvents();

        const observer = new ResizeObserver(entries => {
            const ofh = this.#thead.offsetHeight - 1;
            this.#headerPlaceholder.style.height = ofh + 'px';
            this.#table.style.top = (-ofh) + 'px';
        });
        observer.observe(this.#thead);
    }
}

Inside the connectedCallback function is the creation of this.#headerPlaceholder:

        this.#headerPlaceholder = document.createElement('div');
        this.#headerPlaceholder.setAttribute('style', 'width:100%;height:32px;overflow:none;position:sticky;left:0px;top:0px;background:gray');
        this.#headerPlaceholder.innerHTML = ' ';

And as you can see, this element is sticky and it do sticks. But it’s the <thead> that sticky positioning don’t work. Again, it was working and I don’t know why it just suddenly stopped working.

I have searched a lot to find the cause of this but I’ve got no clue. I followed the suggested solutions and accepted solutions I’ve found in stackoverflow like combining sticky position with css top rule but still it doesn’t work. I’ve tried using position fixed but it created another problem of column sizes e.g. <th> element not following the width value and header column widths and td widths not the same. I’ve checked if outside rules are affecting but nothing I’ve found so far. I have also extended the sticky position to all <tr>s and <th>s but to no avail.

A non-jquery solution is preferrable although you might observe that there are some jquery calls in the snippet I have posted. I am trying my custom element to have less to zero dependencies but as of now it uses jquery in some parts.