Fixed Table Header with CSS in Internet Explorer - html

Question

I have a CSS Code with
.header-table-container th, .table-1 th, .table-2 th{color: #fff; position:sticky;top:0;}
to fix the Table header in my table. Works fine on Chrome/Firefox. But it also has to work in IE as well. I know sticky is not supported in IE. But position:fixed; top:0; created all the Header Elements at one place.
What can I do here?
Edit:
CSS
<style>
*{padding:0; margin: 0; border: 0; font-size: 1em; line-height: 1.3em; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; box-sizing: border-box;}
table{width: 100%; background: #999;}
.header-table-container table{background: #076c84;}
.header-table-container th, .table-1 th, .table-2 th{color: #fff; position:sticky;top:0;}
tr.table_row_1{background: #eee;}
tr.table_row_0 td{background: #fff;}
th, td{padding: 0.25em 0.5em;}
.table-1 th{min-width: 10em;}
.table-1 th:nth-of-type(2){min-width: 5em;}
.table-1 th, .table-2 th{background: #076c84;}
.js-enabled .table-1 th{color: #076c84;}
.table-2{margin-top: 2em; width:auto;}
.table-2 tr.table_row_1 td{background: #fff;}
#media only screen and (max-width: 60em){
.table-2{width:100%;}
.table-2 thead{display: none;}
.table-2 tr, .table-2 td, .table-2 tr:before{display: block;}
.table-2 tr{padding-top: 0.5em; background: #076c84;}
.table-2 td:before{content: attr(data-mykey -column)": ";}
.table-2 tr:before{content: attr(data-mykey-row)": "; padding-left: 0.5em; padding-bottom: 0.5em; color:#fff;}
}
</style>
HTML
> <table id="table-2" class="table-2"> <thead> <tr> <th>RDW</th>
> <th>Komm-Nr.</th> <th>E</th> <th>EBNr</th> <th>VBNr</th> <th>MNr.</th>
> <th>BSNr.</th> <th>Personal-Nr.</th> <th>CCJJVkz</th> <th>A</th>
> <th>Pers.Id</th> <th>Nat</th> <th>Plz</th> <th>lfd.Kuv</th>
> <th>Blatt/Obg</th> <th>Blatt/Kuv</th> <th>Info.F</th> <th>akt~Fol</th>
> <th>SeV</th> <th>SeB</th> <th>Bla-VON</th> <th>Bla-BIS</th>
> <th>Kuv.-Id</th> <th>K~EF</th> <th>ZAK</th> <th>GAK</th>
> <th>GruNr</th> <th>AnwK</th> <th>Nkr.</th> <th>Bla-akt</th>
> <th>Seite-VON</th> <th>Seite-BIS</th> <th>Seitenz</th>
> <th>leere~S</th> <th>NOTE-$3</th> <th>Block-$3</th> <th>Displ-$3</th>
> <th>NOTE-$4</th> <th>Block-$4</th> <th>Displ-$4</th> </tr> </thead>
> <tbody>
>
> <tr class="table_row_0" data-mykey-row="Objekt 1"> <td
> data-mykey-column="RDW">0304</td> <td data-mykey-column="Komm-Nr.">
> 00000000003</td> <td data-mykey-column="E">M</td> <td
> data-mykey-column="EBNr">0007185</td> <td
> data-mykey-column="VBNr">0000000</td> <td
> data-mykey-column="MNr.">52050</td> <td
> data-mykey-column="BSNr.">00000</td> <td
> data-mykey-column="Personal-Nr.">00000000000000000000</td> <td
> data-mykey-column="CCJJVkz">2018YIE</td> <td
> data-mykey-column="A">0</td> <td
> data-mykey-column="Pers.Id">0000000</td> <td
> data-mykey-column="Nat">D</td> <td data-mykey-column="Plz">54439</td>
> <td data-mykey-column="lfd.Kuv">0000001</td> <td
> data-mykey-column="Blatt/Obg">000000009</td> <td
> data-mykey-column="Blatt/Kuv">000000009</td> <td
> data-mykey-column="Info.F">VF4</td> <td
> data-mykey-column="akt~Fol">001</td> <td
> data-mykey-column="SeV">001</td> <td data-mykey-column="SeB">001</td>
> <td data-mykey-column="Bla-VON">001</td> <td
> data-mykey-column="Bla-BIS">0000001</td> <td
> data-mykey-column="Kuv.-Id">0000009</td> <td
> data-mykey-column="K~EF">0069013</td> <td
> data-mykey-column="ZAK">1</td> <td data-mykey-column="GAK">00</td> <td
> data-mykey-column="GruNr">001</td> <td
> data-mykey-column="AnwK">000</td> <td
> data-mykey-column="Nkr.">01488</td> <td
> data-mykey-column="Bla-akt">LO41</td> <td
> data-mykey-column="Seite-VON">L201</td> <td
> data-mykey-column="Seite-BIS">0000009</td> <td
> data-mykey-column="Seitenz">000000001</td> <td
> data-mykey-column="leere~S">000000011</td> <td
> data-mykey-column="NOTE-$3">0000011</td> <td
> data-mykey-column="Block-$3">0000007</td> <td
> data-mykey-column="Displ-$3">00010301</td> <td
> data-mykey-column="NOTE-$4">00000008</td> <td
> data-mykey-column="Block-$4">00000350</td> <td
> data-mykey-column="Displ-$4">00010301</td> </tr> ....
Javascript
<script>
var timer = null;
var table = document.getElementById("table-1");
var headerTable = null;
var tableColumns = new Array();
var headerTableColumns = new Array();
if(table){
var heading = table.getElementsByTagName("thead")[0].getElementsByTagName("tr")[0];
if(heading){
document.getElementsByTagName("body")[0].className += "js-enabled";
var columns = heading.getElementsByTagName("th");
var countOfRows = columns.length;
var headerRow = document.createElement("tr");
var headerTableContainer = document.createElement("div");
headerTable = document.createElement("table");
for (var i = 0; i < countOfRows; i++){
var column = document.createElement("th");
column.appendChild(document.createTextNode(columns[i].firstChild.nodeValue));
headerRow.appendChild(column);
tableColumns.push(columns[i]);
headerTableColumns.push(column);
}
headerTable.className = "header-table";
headerTable.appendChild(headerRow);
headerTableContainer.className = "header-table-container";
headerTableContainer.appendChild(headerTable);
document.getElementsByTagName("body")[0].appendChild(headerTableContainer);
updateHeaderTableWidth();
if (window != null && typeof(window) != "undefined"){
if (window.addEventListener) {
window.addEventListener("resize", resetTableWidth, false);
window.addEventListener("scroll", scrolling, false);
} else {
if (window.attachEvent) {
window.attachEvent("onresize", resetTableWidth);
window.attachEvent("onscroll", scrolling);
} else {
window["onresize"] = resetTableWidth;
window["onscroll"] = scrolling;
}
}
}
}
}
/* Method starts a timer to update the width of the columns in the header table
*/
function resetTableWidth(){
if (timer!= null){
window.clearTimeout(timer);
timer = null;
}
timer = window.setTimeout("updateHeaderTableWidth()", 1000);
}
/* Method updates the width of the columns in the header table
*/
function updateHeaderTableWidth(){
if(headerTableColumns.length <= 0 || tableColumns.length <= 0 || headerTableColumns.length != tableColumns.length){
return;
}
var countOfRows = headerTableColumns.length;
for (var i = 0; i < countOfRows; i++){
headerTableColumns[i].style.width = tableColumns[i].offsetWidth+"px";
}
headerTable.style.width = table.offsetWidth+"px";
}
/* Method updates the position of the header table when scrolling left-right
*/
function scrolling(){
headerTable.style.marginLeft = -window.pageXOffset+"px";
if(window.pageYOffset <= 0 && table.offsetTop == 0 ||(window.pageYOffset >= table.offsetTop && window.pageYOffset < table.offsetTop+table.offsetHeight-headerTable.offsetHeight-10)){
headerTable.style.display = "block";
}
else{
headerTable.style.display = "none";
}
}
</script>