当 table header 行与数据行位于不同的元素中时，如何实现粘性网格 header？

Question

[编辑] - 我已经弄明白了，将在下面留下原始代码并回答我自己的问题，以帮助任何可怜的灵魂如何走上与我相同的悲惨道路。

果然如题。我有一个 table 组件，它是通过 angular 生成的，我想要一个粘性的 header。这可以切换到使用标准响应式设计方法的 'card' 视图，并且相同的基本组件用于整个应用程序的各种网格，但是当它显示为相对简单的 table 时会出现这个特殊问题。

我怀疑由于 HTML 打破 table header 和数据行的方式我遇到了麻烦，但不确定 CSS 不是真的是我的强项之一...

我已经设法通过 JS 实现了一个笨拙的解决方法；基本上我在其他地方有一个 table header 的额外副本，并使用 JS 事件来检测网格何时为 on-screen 但 header 被屏幕顶部遮挡，并且显示此占位符 table header，但这不是非常漂亮（其中有轻微的视觉延迟 appearing/disappearing），并且如果您碰巧在响应式设计方面效果不佳re-size打开后的浏览器，所以我想要更纯粹的东西CSS-based...

我接受我可能需要完全 re-write HTML 是如何为此生成的，但我想我会先看看是否有办法让它正确显示 as-is.

我试图在这里将事情提炼成一个小例子，尽管真实的要复杂得多并且具有一些交互性（例如按 header 中的按钮排序、小图像等）。可能还有很多东西我可以去掉，但我尽量保持它的代表性。

您应该会看到，如果向下滚动网格，header 会从屏幕顶部消失，我希望网格的 header 仅变为 'stick' 这样我总能看到列标题。

感谢您的阅读。

HTML:

<div>
  <H1> Some Random stuff above the table, this can scroll away</H1>
  <p>Bacon ipsum dolor amet ham biltong picanha shankle sirloin beef ribs burgdoggen ham hock fatback. Doner turducken
  sirloin kevin picanha pork jowl. Cupim chicken drumstick, chuck beef ribs porchetta pork short ribs kevin alcatra
  frankfurter tenderloin fatback rump. Ham hock capicola prosciutto shoulder, picanha bacon porchetta meatloaf swine beef
  ribs pork chop tri-tip.</p>

  <p>Ham hock alcatra rump andouille leberkas flank. Shoulder kielbasa tail rump bacon, jerky salami short ribs tenderloin.
  Bacon frankfurter short loin brisket. Tri-tip flank cupim pork belly filet mignon tail buffalo ham shoulder.</p>
</div>

<div class="table container-mobile-scroll">
    <div class="table-table data-table reports mobile-scroll screen-top-table-header" style="width: 1204px;">
        <div class="table-thead">
            <div class="table-tr">
                <div class="table-th " title="Column1">
                    <h6>Column1</h6>
                </div>
                <div class="table-th" title="Column2">
                    <h6>Column2</h6>
                </div>
                <div class="table-th " title="Column3">
                    <h6>Column3</h6>
                </div>
                <div class="table-th " title="Column4">
                    <h6>Column4</h6>
                </div>
                <div class="table-th " title="Column5">
                    <h6>Column5</h6>
                </div>
                <div class="table-th " title="Column6">
                    <h6>Column6</h6>
                </div>
                <div class="table-th " title="Column7">
                    <h6>Column7</h6>
                </div>
                <div class="table-th " title="Column8">
                    <h6>Column8</h6>
                </div>
                <div class="table-th " title="Column9">
                    <h6>Column9</h6>
                </div>
                <div class="table-th " title="Column10">
                    <h6>Column10</h6>
                </div>
                <div class="table-th " title="Column11">
                    <h6>Column11</h6>
                </div>
                <div class="table-th " title="Column12">
                    <h6>Column12</h6>
                </div>
            </div>
        </div>
        <div class="table-tbody">
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
        </div>

    </div>
</div>

CSS:

.table{
      font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
    box-sizing: inherit;
    margin: 0 0 40px 0;
    min-width: 758px;
    display: table;
    width: 100%;
    border: 0;
    outline: 0;
    border-spacing: 0px;
    table-layout: fixed;
}
.table-thead{
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
    border-spacing: 0px;
    box-sizing: inherit;
    position: sticky;
    overflow: hidden;
    background-color: #559edf;
    display: table-header-group;    
}
.table-thead .table-tr{
      font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
    border-spacing: 0px;
    box-sizing: inherit;
    overflow: hidden;
    top: -9999px;
    left: -9999px;
    margin-bottom: 0;
    position: sticky;
    top:0;
    display: table-row;
}
.table-thead .table-th{
    position:sticky;
    top:0;
      font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
    border-spacing: 0px;
    box-sizing: inherit;
    overflow: hidden;
    display: table-cell;
    vertical-align: top;
    color: white;
    height: 110px;
    border: 0;
    text-align: center;    
    padding-top: 31px;
    padding-bottom: 10px;
    border-right: 1px solid #98bfe1;
    width: 15%;
    border-radius: 4px 0 0 0;
    background: #2469a5;
    background-clip: padding-box;
}
.table-tbody{
      font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
    border-spacing: 0px;
    box-sizing: inherit;
    position: sticky;
    overflow: hidden;
    display: table-row-group;
}
.table-tbody .table-tr{
      font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
    border-spacing: 0px;
    box-sizing: inherit;
    cursor: pointer;
    position: sticky;
    overflow: hidden;
    margin-bottom: 20px;
    display: table-row;
    background-image: none;
    border: 0;
}
.table-td{
      line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    border-spacing: 0px;
    cursor: pointer;
    box-sizing: inherit;
    position: relative;
    font-family: firaSans;
    font-size: 15px;
    border: 0;
    width: 15%;
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    padding: 0 10px;
    overflow: hidden;
    color: #2571b4;
    border-right: 1px solid #d2e6f8;
    padding-right: 10px;
    background: #e6f3fb;
    text-align: left;
    padding-left: 15px;
    border-radius: 0;
    background-clip: padding-box;
}

Answer 1

好的，感谢所有阅读本文的人，但我终于解决了。我相信有几件事是必需的：

（不完全确定，但还是这样做了）确保 header 元素和 data 元素共享相同 parent（即没有包含 header 行的外部 html 元素，以及包含数据行的单独元素）
确保在header行单元格的任何地方没有ancestor/parent元素有overflow:hidden、overflow:scroll或overflow:auto 设置.
将 position:sticky 和 top:0 添加到 header 行中的 单元格 ，而不是 header 行本身。

我设法让示例正常工作，但最初无法将其应用到我的实际应用程序中。最后在阅读 this 之后，我发现一些外部 div 有一个 overflow 属性集，这阻止了它的工作。我现在必须解决一些 responsive/viewport 问题，但基本原理如我所愿。

所以我更改了示例代码以使其正常工作，here 是 'working' 示例的 JSitor link。为了避免旧死 links，代码包含在下面。

HTML:


<div>
  <H1> Some Random stuff above the table, this can scroll away</H1>
  <p>Bacon ipsum dolor amet ham biltong picanha shankle sirloin beef ribs burgdoggen ham hock fatback. Doner turducken
  sirloin kevin picanha pork jowl. Cupim chicken drumstick, chuck beef ribs porchetta pork short ribs kevin alcatra
  frankfurter tenderloin fatback rump. Ham hock capicola prosciutto shoulder, picanha bacon porchetta meatloaf swine beef
  ribs pork chop tri-tip.</p>

  <p>Ham hock alcatra rump andouille leberkas flank. Shoulder kielbasa tail rump bacon, jerky salami short ribs tenderloin.
  Bacon frankfurter short loin brisket. Tri-tip flank cupim pork belly filet mignon tail buffalo ham shoulder.</p>
</div>

<div class="table container-mobile-scroll">
    <div class="table-table data-table reports mobile-scroll screen-top-table-header" style="width: 1204px;">
            <div class="table-tr table-header-row">
                <div class="table-th " title="Column1">
                    <h6>Column1</h6>
                </div>
                <div class="table-th" title="Column2">
                    <h6>Column2</h6>
                </div>
                <div class="table-th " title="Column3">
                    <h6>Column3</h6>
                </div>
                <div class="table-th " title="Column4">
                    <h6>Column4</h6>
                </div>
                <div class="table-th " title="Column5">
                    <h6>Column5</h6>
                </div>
                <div class="table-th " title="Column6">
                    <h6>Column6</h6>
                </div>
                <div class="table-th " title="Column7">
                    <h6>Column7</h6>
                </div>
                <div class="table-th " title="Column8">
                    <h6>Column8</h6>
                </div>
                <div class="table-th " title="Column9">
                    <h6>Column9</h6>
                </div>
                <div class="table-th " title="Column10">
                    <h6>Column10</h6>
                </div>
                <div class="table-th " title="Column11">
                    <h6>Column11</h6>
                </div>
                <div class="table-th " title="Column12">
                    <h6>Column12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
            <div class="table-tr">
                <div class="table-td ">
                    <h6>Data1</h6>
                </div>
                <div class="table-td">
                    <h6>Data2</h6>
                </div>
                <div class="table-td ">
                    <h6>Data3</h6>
                </div>
                <div class="table-td ">
                    <h6>Data4</h6>
                </div>
                <div class="table-td ">
                    <h6>Data5</h6>
                </div>
                <div class="table-td ">
                    <h6>Data6</h6>
                </div>
                <div class="table-td ">
                    <h6>Data7</h6>
                </div>
                <div class="table-td ">
                    <h6>Data8</h6>
                </div>
                <div class="table-td ">
                    <h6>Data9</h6>
                </div>
                <div class="table-td ">
                    <h6>Data10</h6>
                </div>
                <div class="table-td ">
                    <h6>Data11</h6>
                </div>
                <div class="table-td ">
                    <h6>Data12</h6>
                </div>
            </div>
        </div>
</div>

CSS:

.table-table{
    box-sizing: inherit;
    margin: 0 0 40px 0;
    display: table;
    width: 100%;
    table-layout: fixed;
}
.table-header-row.table-tr{
    display:table-header-group;
    box-sizing: inherit;
    overflow: hidden;
    margin-bottom: 0;    
}
.table-th{
    position:sticky;
    top:0;
    display: table-cell;
    color: white;
    height: 110px;
    border-right: 1px solid #98bfe1;
    width: 15%;
    border-radius: 4px 0 0 0;
    background: #2469a5;
}

.table-tr{
    display: table-row;
    background-image: none;
}
.table-td{
    width: 15%;
    display: table-cell;
    color: #2571b4;
    border-right: 1px solid #d2e6f8;
    background: #e6f3fb;
}

当 table header 行与数据行位于不同的元素中时，如何实现粘性网格 header？

How to implement sticky Grid header when table header rows are in a separate element from data rows?

html

css

sticky