Example of sticky table headers using 'position: sticky' for header columns.

sticky-table-headers.js

document.body.innerHTML = `
<style>
table {
  position: relative;
  overflow: auto;
}
table, td, th {
  border: 1px solid;
}
thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
}
.table1 thead th {
    background: red;
}
.table2 thead th {
    background: green;
}
.table3 thead th {
    background: blue;
}
td, th {
    padding: 1rem;
}

/* Allows example to scroll past tables */
body {
    height: 1000vh;
}
</style>
`;

var charsStart = '0'.charCodeAt(0),
    charsEnd = 'z'.charCodeAt(0),
    table1 = document.createElement('table'),
    tbody = document.createElement('tbody'),
    thead = document.createElement('thead');

// Thead
// ----
var tr = document.createElement('tr');

for (var i = charsStart; i <= charsEnd; i += 1) {
  var th = document.createElement('th');
  th.textContent = String.fromCharCode(i);
  tr.appendChild(th);
}

thead.appendChild(tr);

// Tbody
// ----
for (var j = 0; j < 10; j += 1) {
  var tr = document.createElement('tr');  

  for (var i = charsStart; i <= charsEnd; i += 1) {
    var td = document.createElement('td');
    td.textContent = '----';
    tr.appendChild(td);
  }

  tbody.appendChild(tr);
}

table1.appendChild(thead);
table1.appendChild(tbody);

document.body.appendChild(table1);

' '.repeat('3').split('').forEach((_, i) => {
    var t = table1.cloneNode(true); 
    t.classList.add(`table${i + 1}`);
    document.body.appendChild(t);
});