[Edit] - I have figured it out, will leave original code below and answer my own question to help any poor souls how tread the same miserable path as I.
As per the title really. I have a table component which is generated via angular and I would like a sticky header for this. This can switch to a 'card' view using standard responsive design approaches, and the same basic component is used for various grids throughout an application, but this particular problem is when it is displayed as a relatively straightforward table.
I suspect I'm having trouble due to the way the HTML breaks the table header and data rows up, but not sure as CSS is not really one of my strengths...
I have managed to implement a cludgy workaround via JS; basically I have an additional copy of the table header elsewhere and use JS events to detect when a grid is on-screen but has the header obscured off the top of the screen and displays this placeholder table header, but this is not super pretty (slighty visual delay in it appearing/disappearing) and doesn't really work that well in terms of responsive design either if you happen to re-size the browser after opening, so I'd like something more purely CSS-based...
I accept I may well need to totally re-write how the HTML gets generated for this, but thought I'd first see if there's a way to get it to display properly as-is.
I have attempted to distill the thing into a small example here, though the real one is considerably more complex & has some interactivity (e.g. sort by buttons in the header, small images, etc). There is probably a pile more stuff I could strip out but I'm trying to keep it as representative as I can.
You should see that if you scroll down the grid, the header disappears off the top of the screen, and I would just like the header of the grid only to 'stick' so I can always see the column headings.
Thank you for reading.
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;
}
OK, thanks to everyone who read this, but I finally have worked it out. I believe there are several things which are required:
overflow:hidden, overflow:scroll or overflow:auto set.position:sticky and top:0 to the cells in the header row, not the header row itself.I managed to get the sample to work ok, but initially could not apply that to my actual application. Finally after reading this I found that some outer div had an overflow property set and that was preventing it from working. I do now have to fix some responsive/viewport issues but the fundamentals work as I would like.
So I've changed the example code to work, and here is a JSitor link to the 'working' example. To avoid old dead links, the code is included below though.
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;
}