Исправлен заголовок таблицы с помощью CSS в Internet Explorer

Question

У меня есть код CSS с

.header-table-container th, .table-1 th, .table-2 th{color: #fff; position:sticky;top:0;}

чтобы исправить заголовок таблицы в моей таблице. Отлично работает на Chrome / Firefox. Но это также должно работать в IE. Я знаю, что липкая не поддерживается в IE. Но положение: исправлено; верх: 0; создал все элементы заголовка в одном месте.

Что я могу сделать здесь?

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>