当表头行与数据行位于单独的元素中时，如何实现粘性网格表头

[Edit]-我已经想好了，将在下面留下原始代码，并回答我自己的问题，帮助任何可怜的灵魂如何走上与我一样悲惨的道路。

真的按照标题。我有一个通过angular生成的表组件，我想要一个粘性的标题。这可以使用标准的响应式设计方法切换到"卡片"视图，并且在整个应用程序中，相同的基本组件用于各种网格，但当它显示为相对简单的表格时，就会出现这种特殊问题。

我怀疑我遇到了麻烦，因为HTML分解表头和数据行的方式，但不确定，因为CSS并不是我真正的优势之一。。。

我已经设法通过JS实现了一个包含的解决方法；基本上，我在其他地方有一个额外的表头副本，并使用JS事件来检测网格何时在屏幕上，但这并不是非常漂亮(它出现/消失时有轻微的视觉延迟(，如果你在打开后碰巧重新调整了浏览器的大小，那么在响应设计方面也不会很好地工作，所以我想要一些更纯粹基于CSS的东西。。。

我承认我可能需要完全重写HTML是如何生成的，但我想我应该先看看是否有办法让它正常显示。

我试图把这个东西提炼成一个小例子，尽管真正的例子要复杂得多；具有一定的交互性(例如，按标题中的按钮排序、小图像等(。我可能可以去掉更多的东西，但我正在尽可能地保持它的代表性。

你应该看到，如果你向下滚动网格，标题会从屏幕顶部消失，我只希望网格的标题"粘贴"，这样我就可以始终看到列标题。

感谢您的阅读。

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

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

确保头行单元格的任何处的祖先/父元素都没有设置overflow:hidden、overflow:scroll或overflow:auto
将position:sticky和top:0添加到标题行中的单元格，而不是标题行本身

我设法让样本正常工作，但最初无法将其应用于我的实际应用程序。最后，在阅读了这篇文章后，我发现一些外部div有一个overflow属性集，这使它无法工作。我现在确实需要解决一些响应/视口问题，但基本原理如我所愿。

因此，我已经将示例代码更改为工作代码，这里有一个指向"工作"示例的JSitor链接。为了避免旧的死链接，代码包含在下面。

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

相关内容

最新更新

热门标签：