CODEWITHSUNDEEP
javascriptjqueryhtmlcsshtml-table
Skeets
Skeets

Reputation: 4818

"Sticky" headers on a table with horizontal scroll... completely impossible?

After researching this for the last few hours, I'm beginning to think this is impossible, even on the most up-to-date browsers:

HTML table element with a horizontal scroll, with a "sticky" thead on the top, as part of a surrounding web page that scrolls vertically.

Here's my attempt:

#a {
  height: 100px;
  background-color: green;
}

body {
  width: 100%;
}

#wrapper {
  overflow-x: scroll;
  width: 100%;
}

th {
  position:sticky;
  top: 0;
  background-color: red;
  z-index: 1;
}

td {
  white-space: nowrap;
}

#b {
  height: 2000px;
  background-color: blue;
}
<div id="a">
  some content
</div>

<div id="wrapper">
  <table id="test">
    <thead>
      <tr>
        <th>sticky header</th>
        <th>sticky header</th>
        <th>sticky header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>long content long content long content long content long content long content</td>
        <td>long content long content long content long content long content long content</td>
        <td>long content long content long content long content long content long content</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="b">
  some more content
</div>

(There's also this fiddle, so you can mess with the code)

The way it currently is, the "position: sticky" doesn't work when the #wrapper is overflow-x: scroll. If you remove the overflow-x rule, it works, but then of course the table expands the width of the entire page (which is definitely not cool)

I know making the table the "scrolling" element would fix the issue, but that's not desirable either (I only want the web page body to be scrollable vertically).

I've tried to come up with alternate CSS solutions, and even Javascript solutions, but I can't think of a solution that would ultimately work. Is this actually impossible?

While I'd prefer a css solution, I'm open to a javascript solution at this point.

Upvotes: 3

Views: 1863

Answers (5)

Trickytree22
Trickytree22

Reputation: 86

Have a fiddle with a working example. You could even get rid of some of the javascript by declaring width/height beforehand.

Added some ids to your original example

<div id="a">
  some content
</div>

<div id="wrapper">
  <table id="test">
    <thead id="sticky">
      <tr id="headerRow">
        <th>sticky header</th>
        <th>sticky header</th>
        <th>sticky header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>long content long content long content long content long content long content</td>
        <td>long content long content long content long content long content long content</td>
        <td>long content long content long content long content long content long content</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="b">
  some more content
</div>

Below is the javascript

// When the user scrolls the page, execute addSticky 
window.onscroll = function() {addSticky()};
document.getElementById("wrapper").onscroll = function(){addSticky()};

// Get the header
var header = document.getElementById("sticky");

// Get the offset position
var sticky = header.offsetTop;

// Get bottom offset
var bottomOffset = document.getElementById("test").offsetHeight+100;


// Set the width of the row and columns by placing them in an array and looping said array
var headerRow = document.getElementById("headerRow");
header.style.width = headerRow.offsetWidth+"px";
var headerKids = headerRow.children;
for (var i=0; i<headerKids.length; i++){
  headerKids[i].style.width=headerKids[i].offsetWidth+"px";
}

// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function addSticky() {
  if (this.scrollY > 100 && this.scrollY < bottomOffset ) {
    xScroll = document.getElementById("wrapper").scrollLeft;
    header.classList.add("sticky");
    header.style.left = "-"+xScroll+"px";
  } else {
    header.classList.remove("sticky");
  }
}

Updates to CSS

.sticky {
  position: fixed;
  top: 0;
  height: 20px;
}

Upvotes: 1

Skeets
Skeets

Reputation: 4818

I discovered that the jquery.floatThead package does do what I'm looking for, I was just missing this setting:

$("table").floatThead({
position:"absolute"
});

It defaults to "fixed", which doesn't work in this case.

You can see the fixed fiddle here, working exactly as I needed.

Still, it's kind of ridiculous that I need a javascript package to do a task this simple. If I'm missing something and there's a simpler answer to this basic issue, I'd love to hear it! 😅

Upvotes: 1

Kuldeep Bhimte
Kuldeep Bhimte

Reputation: 959

Using position: sticky for table is applicable. Please see the below code.

thead th { position: sticky; top: 0; }
<table>
    <thead>
        <tr>
            <th>column 1</th>
            <th>column 2</th>
            <th>column 3</th>
            <th>column 4</th>            
        </tr>    
    </thead>
    <tbody>
    <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
      </tr><tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
      </tr>
    </tbody>
</table>

Please refer to https://caniuse.com/#feat=css-sticky where you can check if the feature is usable or not.

Upvotes: 0

Ram Segev
Ram Segev

Reputation: 2573

If you user overflow with anything other then visible you must give the element fixed height, otherwise when you scroll the parent the element is ready to stick but the height is unconstrained.

A simple CSS solution is to give #wrapper height using the viewport (i.e vh)

#wrapper {
  height: 30vh;
  overflow-x: scroll;
  width: 100%;
}


#a {
  height: 100px;
  background-color: green;
}

body {
  width: 100%;
}

#wrapper {
  overflow-x: scroll;
  width: 100%;
  height: 30vh;
}

th {
  position:sticky;
  top: 0;
  background-color: red;
  z-index: 1;
}

td {
  white-space: nowrap;
}

#b {
  height: 2000px;
  background-color: blue;
}

#scroller{
  width: 100%;
  height: 400px;
  overflow:auto;
}
<div id="a">
  some content
</div>

<div id="wrapper">
  <table id="test">
    <thead>
      <tr>
        <th>sticky header</th>
        <th>sticky header</th>
        <th>sticky header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>long content long content long content long content long content long content</td>
        <td>long content long content long content long content long content long content</td>
        <td>long content long content long content long content long content long content</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="b">
  some more content
</div>

Upvotes: 0

Basil Trueb
Basil Trueb

Reputation: 41

This is not exactly what you asked but try to tamper with this table:

https://codepen.io/joelPrz/pen/Gclki

var tee = $('.gridtable thead');
var tw = document.getElementsByClassName('tabWrap')[0];
var cloner = document.getElementsByClassName('tabWrap')[0];
var bd = document.getElementsByClassName('container')[0];
var newTableWrap = document.createElement("div");
var newTable = document.createElement("Table");
var oldTable = document.getElementsByClassName('gridtable')[0];
var childNode = oldTable.childNodes[1];
var wrapW = $(tw).css('width');
var wrapY = $(tw).css('height');
var headHeight = tee.css('height');

//node The node to be cloned.
var dupNode = childNode.cloneNode(true);
newTable.appendChild(dupNode);
newTableWrap.appendChild(newTable);

newTable.classList.add("gridtableT");
newTable.classList.add("gridtable");

$(newTableWrap).css({'width': wrapW, 'overflow':'hidden'});

bd.insertBefore(newTableWrap , tw);
$(oldTable).css('margin-top', ('-' + headHeight) );

$('tr td').filter(":last-child")
  .css('border-right-color', 'transparent');

$('tr:last td').css('border-bottom-color', 'transparent');

$(tw).on('scroll', function(e){
  var newLeft = e.target.scrollLeft;
  $(newTable).css('margin-left', '-' + newLeft + 'px');
});
table { border-collapse: collapse; }

th, td {
  border-left-color: transparent!important;
}

.last-cell {
  border-right-color: transparent!important;
}

.container {
  outline: 1px solid black;
  outline-offset: 0px;
  width: 800px;
}

.tabWrap {
  height: 500px;
  margin-right: 30px;
  margin-bottom: 0;
  overflow: scroll;
  width: 800px;
}

.gridtable {
  color:#333333;
  font-family: verdana,arial,sans-serif;
  font-size:11px;
}

.gridtable th {
  border-width: 1px;
  border-style: solid;
  border-color: #666666;
  background-color: #dedede;
  padding: 8px;
}

.gridtable td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #ffffff;
}

.gridtableT { color: red; }

.gridtableT th { border-top-color: transparent; }

.lastRow td {
  background-color: lightcyan;
}

div.tabWrap th {
  border-bottom-color: transparent!important;
  border-top-color: transparent!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="tabWrap">
  <table class="gridtable">
    <thead>
      <tr>
        <th>Head One</th>
        <th>Head Two</th>
        <th>Head Three</th>
        <th>Head Four</th>
        <th>Head Five</th>
        <th>Head Six</th>
        <th>Head Seven</th>
        <th>Head Eight</th>
        <th>Head Nine</th>
        <th>Head Ten</th>
        <th>Head Eleven</th>
        <th>Head Twelve</th>
        <th>Head Thirteen</th>
        <th>Head Fourteen</th>
        <th>Head Fifteen</th>
        <th>Head Sixteen</th>
        <th>Head Seventeen</th>
        <th>Head Eighteen</th>
        <th>Head Nineteen</th>
        <th class="last-cell" style="width:6%">Head Twenty</th>
      </tr>
    </thead>
    <tbody>
      <tr class="firstRow">
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three Four Dive</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr>
        <td>Data One</td>
        <td>Data Two</td>
        <td>Data Three</td>
        <td>Data Four</td>
        <td>Data Five</td>
        <td>Data Six</td>
        <td>Data Seven</td>
        <td>Data Eight</td>
        <td>Data Nine</td>
        <td>Data Ten</td>
        <td>Data Eleven</td>
        <td>Data Twelve</td>
        <td>Data Thirteen</td>
        <td>Data Fourteen</td>
        <td>Data Fifteen</td>
        <td>Data Sixteen</td>
        <td>Data Seventeen</td>
        <td>Data Eighteen</td>
        <td>Data Nineteen</td>
        <td>Data Twenty</td>
      </tr>
      <tr class="lastRow">
        <td>Last One</td>
        <td>Last Two</td>
        <td>Last Three</td>
        <td>Last Four</td>
        <td>Last Five</td>
        <td>Last Six</td>
        <td>Last Seven</td>
        <td>Last Eight</td>
        <td>Last Nine</td>
        <td>Last Ten</td>
        <td>Last Eleven</td>
        <td>Last Twelve</td>
        <td>Last Thirteen</td>
        <td>Last Fourteen</td>
        <td>Last Fifteen</td>
        <td>Last Sixteen</td>
        <td>Last Seventeen</td>
        <td>Last Eighteen</td>
        <td>Last Nineteen</td>
        <td>Last Twenty</td>
      </tr>
    </tbody>
  </table>
</div>
</div>

The Header is sticky, but only inside the table, not the page. So maby you can alter it to your Needs.

(Open the Code by link, the Code I copied here, somehow has an error)

Upvotes: 0

Related Questions