Fixed Table Header with CSS in Internet Explorer

I have a CSS Code with

.header-table-container th, .table-1 th, .table-2 thcolor: #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;
tablewidth: 100%; background: #999;
.header-table-container tablebackground: #076c84;
.header-table-container th, .table-1 th, .table-2 thcolor: #fff; position:sticky;top:0;
tr.table_row_1background: #eee;
tr.table_row_0 tdbackground: #fff;
th, tdpadding: 0.25em 0.5em;
.table-1 thmin-width: 10em;
.table-1 th:nth-of-type(2)min-width: 5em;
.table-1 th, .table-2 thbackground: #076c84;
.js-enabled .table-1 thcolor: #076c84;
.table-2margin-top: 2em; width:auto;
.table-2 tr.table_row_1 tdbackground: #fff;

@media only screen and (max-width: 60em)
.table-2width:100%;
.table-2 theaddisplay: none;
.table-2 tr, .table-2 td, .table-2 tr:beforedisplay: block;
.table-2 trpadding-top: 0.5em; background: #076c84;
.table-2 td:beforecontent: attr(data-mykey -column)": ";
.table-2 tr:beforecontent: 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()

/* Method updates the position of the header table when scrolling left-right
*/
function scrolling()
</script>


Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.