CSS 粘性定位在 <thead> 中不起作用的可能原因

Question

我创建了一个模仿 C# 的 datagridview 的自定义元素。我能够像 dot net 的 listview 或 datagridview header 一样将 粘在顶部，直到最近我发现它不再起作用了。

此自定义元素中的所有内容都是以编程方式生成的，包括 CSS 规则。这是生成 CSS 规则的代码：

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);
    }
}

connectedCallback函数内部是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 = ' ';

正如您所看到的，这个元素是有粘性的并且它确实会粘住。但粘性定位不起作用的是。再次，它正在工作，但我不知道为什么它突然停止工作。

我已经进行了很多搜索以找到此原因，但我没有任何线索。我遵循了建议的解决方案并接受了我在 stackoverflow 中找到的解决方案，例如将粘性位置与 css top 规则相结合，但它仍然不起作用。我尝试过使用固定位置，但它产生了另一个列大小问题，例如 元素不跟随宽度值且标题列宽度和 td 宽度不一样。我已经检查过外部规则是否会产生影响，但到目前为止我还没有发现任何情况。我还将粘性位置扩展到所有 和 但无济于事。

非 jquery 解决方案是更好的选择，尽管您可能会发现我发布的代码片段中有一些 jquery 调用。我正在尝试将我的自定义元素的依赖关系减少到零，但到目前为止它在某些部分使用 jquery。

更新

我无法直接将生成的 CSS 和标记粘贴到此处，但我认为链接可以：

生成的CSS：https://pastebin.com/embed_js/9tVx409n

生成的标记：https://pastebin.com/embed_js/6EmpvY6Q

编辑：添加 SO 片段：

<div class="flex fdcol jcsb cx100 cy100">
  <div class="cx100 cy100">
    <ek-listview class="cx100 -lvw-01070108000005050008030200-css" id="lvw" nowrap="" style="border: 1px solid rgb(170, 170, 170); width: 1094px; height: 265.672px;" tabindex="0">
      <table style="top: 0px; width: 890px;">
        <thead>
          <tr>
            <th style="width: 250px;">
              <div>
                <p style="text-align: left;">Name</p>
              </div>
            </th>
            <th style="width: 100px;">
              <div>
                <p style="text-align: left;">Bio Name</p>
              </div>
            </th>
            <th style="width: 100px;">
              <div>
                <p style="text-align: left;">Date Hired</p>
              </div>
            </th>
            <th style="width: 120px;">
              <div>
                <p style="text-align: left;">Service Length</p>
              </div>
            </th>
            <th style="width: 120px;">
              <div>
                <p style="text-align: left;">Position</p>
              </div>
            </th>
            <th style="width: 90px;">
              <div>
                <p style="text-align: right;">Salary</p>
              </div>
            </th>
            <th style="width: 110px;">
              <div>
                <p style="text-align: right;">Payments</p>
              </div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <div>
                <p><span>Employee 1</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span></span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Aug 1, 2019</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>4 years, 10 months &amp; 9 days</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Sales Executive</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span>9,000.00</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span></span></p>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div>
                <p><span>Employee 2</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span></span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>May 3, 2023</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>1 year, 1 month &amp; 7 days</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Installer</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span>9,100.00</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span></span></p>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div>
                <p><span>Employee 4</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span></span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Dec 7, 2021</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>2 years, 6 months &amp; 3 days</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Installer</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span>10,400.00</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span></span></p>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div>
                <p><span>Employee 5</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span></span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>May 1, 2023</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>1 year, 1 month &amp; 8 days</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Installer</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span>9,999.00</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span></span></p>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div>
                <p><span>Employee 6</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span></span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Apr 4, 2024</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>0 year, 2 months &amp; 6 days</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Office Admin</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span>9,750.00</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span></span></p>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div>
                <p><span>Employee 7</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span></span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Mar 1, 2024</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>0 year, 3 months &amp; 9 days</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Installer</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span>10,444.00</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span></span></p>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div>
                <p><span>Employee 8</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span></span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Apr 3, 2024</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>0 year, 2 months &amp; 6 days</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Installer</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span>9,750.00</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span></span></p>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div>
                <p><span>Employee 9</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span></span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Sep 11, 2023</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>0 year, 8 months &amp; 29 days</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Area Supervisor</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span>9,750.00</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span></span></p>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div>
                <p><span>Employee 10</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span></span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Feb 1, 2024</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>0 year, 4 months &amp; 9 days</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>IT Programmer</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span>12,000.00</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span></span></p>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div>
                <p><span>Employee 11</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span></span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Feb 26, 2024</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>0 year, 3 months &amp; 13 days</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Office Admin</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span>9,750.00</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span></span></p>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </ek-listview>
  </div>
</div>
<style type="text/css" id="-lvw-01070107090900090401010003">
  .-lvw-01070107090900090401010003-css {
    position: relative;
    background-color: white;
    outline: none;
    display: block;
    overflow: auto;
  }
  
  .-lvw-01070107090900090401010003-css * {
    user-select: none;
    box-sizing: border-box;
    position: relative;
    padding: 0px;
    margin: 0px;
    background-color: transparent;
    color: inherit
  }
  
  .-lvw-01070107090900090401010003-css {
    --gridcolor: lightgray;
    --xmargins: 5px;
    --itembackcolor: white;
    --itemforecolor: black;
    --headerbackcolor: gray;
    --headerforecolor: black;
    --headerhoverback: forestgreen;
    --headerhoverfore: black;
    --headerpadding: 4px;
    --itempadding: 4px;
  }
  
  .-lvw-01070107090900090401010003-css table {
    border-collapse: collapse;
    z-index: 0;
    left: 0px;
    top: 0px;
    background: white;
    table-layout: fixed;
    display: block
  }
  
  .-lvw-01070107090900090401010003-css thead {
    position: sticky;
    z-index: 11;
    top: 0px
  }
  
  .-lvw-01070107090900090401010003-css th,
  .-lvw-01070107090900090401010003-css td {
    text-align: left;
    vertical-align: top;
  }
  
  .-lvw-01070107090900090401010003-css th {
    position: sticky;
    top: 0px;
    background-color: var(--headerbackcolor);
    color: var(--headerforecolor);
    border-right: 1px solid var(--gridcolor);
    transition: background-color .5s
  }
  
  .-lvw-01070107090900090401010003-css:not([headeronly]) th {
    cursor: pointer;
  }
  
  .-lvw-01070107090900090401010003-css:not([headeronly]) th:hover {
    background-color: var(--headerhoverback);
    color: var(--headerhoverfore)
  }
  
  .-lvw-01070107090900090401010003-css th>div,
  .-lvw-01070107090900090401010003-css td>div {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start
  }
  
  .-lvw-01070107090900090401010003-css th>div {
    margin-left: var(--xmargins);
    padding: var(--headerpadding) var(--xmargins) var(--headerpadding) 0px;
  }
  
  .-lvw-01070107090900090401010003-css th>div>p {
    width: 100%
  }
  
  .-lvw-01070107090900090401010003-css td {
    background: var(--itembackcolor);
    color: var(--itemforecolor);
  }
  
  .-lvw-01070107090900090401010003-css th::after {
    content: "";
    width: var(--xmargins);
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    cursor: ew-resize
  }
  
  .-lvw-01070107090900090401010003-css th:not(:first-child)::before {
    content: "";
    width: var(--xmargins);
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    cursor: ew-resize
  }
  
  .-lvw-01070107090900090401010003-css td>div {
    padding: var(--xmargins) var(--itempadding);
    width: 100%;
  }
  
  .-lvw-01070107090900090401010003-css td>div>p>img {
    float: left;
    margin-right: 5px
  }
  
  .-lvw-01070107090900090401010003-css td>input {
    height: 100%;
    width: 100%;
    outline: 0px solid transparent;
    border: none;
    padding: 1px;
    background: white;
    color: black;
  }
  
  .-lvw-01070107090900090401010003-css td {
    color: black
  }
  
  .-lvw-01070107090900090401010003-css tr[selected] {
    background: #018;
    color: white
  }
  
  .-lvw-01070107090900090401010003-css tr[selected]>td:not([selected]) {
    background: transparent;
    color: white
  }
  
  .-lvw-01070107090900090401010003-css tr[selected]>td[selected] {
    background: rgba(255, 255, 255, .2);
  }
  
  .-lvw-01070107090900090401010003-css tbody>tr:nth-child(even) {
    --bg-color: rgba(0, 0, 0, .05)
  }
  
  .-lvw-01070107090900090401010003-css tbody>tr:nth-child(even) td {
    background-color: var(--bg-color);
  }
  
  .-lvw-01070107090900090401010003-css tbody>tr {
    border-bottom: 1px solid var(--gridcolor);
    color: black
  }
  
  .-lvw-01070107090900090401010003-css .splits {
    border-top: 1px solid var(--gridcolor)
  }
  
  .-lvw-01070107090900090401010003-css tbody>tr>td p {
    outline: none;
    width: 100%;
  }
  
  .-lvw-01070107090900090401010003-css tbody td {
    border-right: 1px solid var(--gridcolor)
  }
  
  .-lvw-01070107090900090401010003-css[nogrid] tbody * {
    border-color: transparent
  }
  
  .-lvw-01070107090900090401010003-css[nogrid] tbody>tr:nth-child(even)>td {
    border-color: var(--bg-color)
  }
  
  .-lvw-01070107090900090401010003-css[nowrap] p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
  }
  
  .-lvw-01070107090900090401010003-css[checkboxes] td>div>div[checkbox] {
    float: left;
    border: 1px solid gray;
    margin-right: 5px;
    width: 16px;
    height: 16px;
    background: white
  }
  
  .-lvw-01070107090900090401010003-css[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
  }
</style>

Answer 1

ek-listview 祖先的类与 CSS 中祖先的所有类不匹配。

CSS有.-lvw-01070107090900090401010003-css

ek-listview 具有类 -lvw-01070108000005050008030200-css

（手动）更改代码片段中的类可以设置表格的格式，并且标题具有粘性位置。

<div class="flex fdcol jcsb cx100 cy100">
  <div class="cx100 cy100">
    <ek-listview class="cx100 -lvw-01070107090900090401010003-css" id="lvw" nowrap="" style="border: 1px solid rgb(170, 170, 170); width: 1094px; height: 265.672px;" tabindex="0">
      <table style="top: 0px; width: 890px;">
        <thead>
          <tr>
            <th style="width: 250px;">
              <div>
                <p style="text-align: left;">Name</p>
              </div>
            </th>
            <th style="width: 100px;">
              <div>
                <p style="text-align: left;">Bio Name</p>
              </div>
            </th>
            <th style="width: 100px;">
              <div>
                <p style="text-align: left;">Date Hired</p>
              </div>
            </th>
            <th style="width: 120px;">
              <div>
                <p style="text-align: left;">Service Length</p>
              </div>
            </th>
            <th style="width: 120px;">
              <div>
                <p style="text-align: left;">Position</p>
              </div>
            </th>
            <th style="width: 90px;">
              <div>
                <p style="text-align: right;">Salary</p>
              </div>
            </th>
            <th style="width: 110px;">
              <div>
                <p style="text-align: right;">Payments</p>
              </div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <div>
                <p><span>Employee 1</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span></span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Aug 1, 2019</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>4 years, 10 months &amp; 9 days</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Sales Executive</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span>9,000.00</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span></span></p>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div>
                <p><span>Employee 2</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span></span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>May 3, 2023</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>1 year, 1 month &amp; 7 days</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Installer</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span>9,100.00</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span></span></p>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div>
                <p><span>Employee 4</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span></span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Dec 7, 2021</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>2 years, 6 months &amp; 3 days</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Installer</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span>10,400.00</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span></span></p>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div>
                <p><span>Employee 5</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span></span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>May 1, 2023</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>1 year, 1 month &amp; 8 days</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Installer</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span>9,999.00</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span></span></p>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div>
                <p><span>Employee 6</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span></span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Apr 4, 2024</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>0 year, 2 months &amp; 6 days</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Office Admin</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span>9,750.00</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span></span></p>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div>
                <p><span>Employee 7</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span></span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Mar 1, 2024</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>0 year, 3 months &amp; 9 days</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Installer</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span>10,444.00</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span></span></p>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div>
                <p><span>Employee 8</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span></span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Apr 3, 2024</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>0 year, 2 months &amp; 6 days</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Installer</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span>9,750.00</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span></span></p>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div>
                <p><span>Employee 9</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span></span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Sep 11, 2023</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>0 year, 8 months &amp; 29 days</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Area Supervisor</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span>9,750.00</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span></span></p>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div>
                <p><span>Employee 10</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span></span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Feb 1, 2024</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>0 year, 4 months &amp; 9 days</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>IT Programmer</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span>12,000.00</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span></span></p>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div>
                <p><span>Employee 11</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span></span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Feb 26, 2024</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>0 year, 3 months &amp; 13 days</span></p>
              </div>
            </td>
            <td>
              <div>
                <p><span>Office Admin</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span>9,750.00</span></p>
              </div>
            </td>
            <td>
              <div>
                <p style="text-align: right;"><span></span></p>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </ek-listview>
  </div>
</div>
<style type="text/css" id="-lvw-01070107090900090401010003">
  .-lvw-01070107090900090401010003-css {
    position: relative;
    background-color: pink;
    outline: none;
    display: block;
    overflow: auto;
  }
  
  .-lvw-01070107090900090401010003-css * {
    user-select: none;
    box-sizing: border-box;
    position: relative;
    padding: 0px;
    margin: 0px;
    background-color: transparent;
    color: inherit
  }
  
  .-lvw-01070107090900090401010003-css {
    --gridcolor: lightgray;
    --xmargins: 5px;
    --itembackcolor: white;
    --itemforecolor: black;
    --headerbackcolor: gray;
    --headerforecolor: black;
    --headerhoverback: forestgreen;
    --headerhoverfore: black;
    --headerpadding: 4px;
    --itempadding: 4px;
  }
  
  .-lvw-01070107090900090401010003-css table {
    border-collapse: collapse;
    z-index: 0;
    left: 0px;
    top: 0px;
    background: white;
    table-layout: fixed;
    display: block
  }
  
  .-lvw-01070107090900090401010003-css thead {
    position: sticky;
    z-index: 11;
    top: 0px
  }
  
  .-lvw-01070107090900090401010003-css th,
  .-lvw-01070107090900090401010003-css td {
    text-align: left;
    vertical-align: top;
  }
  
  .-lvw-01070107090900090401010003-css th {
    position: sticky;
    top: 0px;
    background-color: var(--headerbackcolor);
    color: var(--headerforecolor);
    border-right: 1px solid var(--gridcolor);
    transition: background-color .5s
  }
  
  .-lvw-01070107090900090401010003-css:not([headeronly]) th {
    cursor: pointer;
  }
  
  .-lvw-01070107090900090401010003-css:not([headeronly]) th:hover {
    background-color: var(--headerhoverback);
    color: var(--headerhoverfore)
  }
  
  .-lvw-01070107090900090401010003-css th>div,
  .-lvw-01070107090900090401010003-css td>div {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start
  }
  
  .-lvw-01070107090900090401010003-css th>div {
    margin-left: var(--xmargins);
    padding: var(--headerpadding) var(--xmargins) var(--headerpadding) 0px;
  }
  
  .-lvw-01070107090900090401010003-css th>div>p {
    width: 100%
  }
  
  .-lvw-01070107090900090401010003-css td {
    background: var(--itembackcolor);
    color: var(--itemforecolor);
  }
  
  .-lvw-01070107090900090401010003-css th::after {
    content: "";
    width: var(--xmargins);
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    cursor: ew-resize
  }
  
  .-lvw-01070107090900090401010003-css th:not(:first-child)::before {
    content: "";
    width: var(--xmargins);
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    cursor: ew-resize
  }
  
  .-lvw-01070107090900090401010003-css td>div {
    padding: var(--xmargins) var(--itempadding);
    width: 100%;
  }
  
  .-lvw-01070107090900090401010003-css td>div>p>img {
    float: left;
    margin-right: 5px
  }
  
  .-lvw-01070107090900090401010003-css td>input {
    height: 100%;
    width: 100%;
    outline: 0px solid transparent;
    border: none;
    padding: 1px;
    background: white;
    color: black;
  }
  
  .-lvw-01070107090900090401010003-css td {
    color: black
  }
  
  .-lvw-01070107090900090401010003-css tr[selected] {
    background: #018;
    color: white
  }
  
  .-lvw-01070107090900090401010003-css tr[selected]>td:not([selected]) {
    background: transparent;
    color: white
  }
  
  .-lvw-01070107090900090401010003-css tr[selected]>td[selected] {
    background: rgba(255, 255, 255, .2);
  }
  
  .-lvw-01070107090900090401010003-css tbody>tr:nth-child(even) {
    --bg-color: rgba(0, 0, 0, .05)
  }
  
  .-lvw-01070107090900090401010003-css tbody>tr:nth-child(even) td {
    background-color: var(--bg-color);
  }
  
  .-lvw-01070107090900090401010003-css tbody>tr {
    border-bottom: 1px solid var(--gridcolor);
    color: black
  }
  
  .-lvw-01070107090900090401010003-css .splits {
    border-top: 1px solid var(--gridcolor)
  }
  
  .-lvw-01070107090900090401010003-css tbody>tr>td p {
    outline: none;
    width: 100%;
  }
  
  .-lvw-01070107090900090401010003-css tbody td {
    border-right: 1px solid var(--gridcolor)
  }
  
  .-lvw-01070107090900090401010003-css[nogrid] tbody * {
    border-color: transparent
  }
  
  .-lvw-01070107090900090401010003-css[nogrid] tbody>tr:nth-child(even)>td {
    border-color: var(--bg-color)
  }
  
  .-lvw-01070107090900090401010003-css[nowrap] p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
  }
  
  .-lvw-01070107090900090401010003-css[checkboxes] td>div>div[checkbox] {
    float: left;
    border: 1px solid gray;
    margin-right: 5px;
    width: 16px;
    height: 16px;
    background: white
  }
  
  .-lvw-01070107090900090401010003-css[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
  }
</style>

我们可以在这里看到动态创建的类：

ListView.#lvwId = '-lvw-' + Array.from(Date.now().toString()).map(b => ('00' + b.toString(16)).slice(-2)).join('');
            ListView.#lvwCss = ListView.#lvwId + '-css';

它取决于日期，所以我认为发生的情况是调用的 CSS 与动态代码不同步。它们必须同时创建。