完整响应表中的固定标头的CSS解决方案

Question

我有一个完整的响应表，带有CSS和Javascript，如下所示：

<title>HTML-Tabellen und responsives Webdesign</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<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{position:fixed; top: 0; left: 0; width: 100%;}
.header-table-container th, .table-1 th, .table-2 th{color: #fff;}
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>

和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>

HTML

<table id="table-2" class="table-2">
    <thead>
        <tr><th>Spalte 1</th><th>Spalte 2</th><th>Spalte 3</th><th>Spalte 4</th><th>Spalte 5</th><th>Spalte 6</th><th>Spalte 7</th><th>Spalte 8</th><th>Spalte 9</th><th>Spalte 10</th><th>Spalte 10</th><th>Spalte 10</th><th>Spalte 10</th><th>Spalte 10</th><th>Spalte 10</th><th>Spalte 10</th><th>Spalte 10</th><th>Spalte 10</th><th>Spalte 10</th><th>Spalte 10</th><th>Spalte 10</th><th>Spalte 10</th></tr>
    </thead>
    <tbody><tr class="table_row_0" data-mykey-row="Objekt 1"><td data-mykey-column="Spalte 1">Inhalt Zeile 1</td><td data-mykey-column="Spalte 2">Inhalt Zeile 1&nbsp;lorem ipsum lorem ipsum</td><td data-mykey-column="Spalte 3">Inhalt Zeile 1</td><td data-mykey-column="Spalte 4">Inhalt Zeile 1</td><td data-mykey-column="Spalte 5">Inhalt Zeile 1</td><td data-mykey-column="Spalte 6">Inhalt Zeile 1</td><td data-mykey-column="Spalte 7">Inhalt Zeile 1</td><td data-mykey-column="Spalte 8">Inhalt Zeile 1</td><td data-mykey-column="Spalte 9">Inhalt Zeile 1</td><td data-mykey-column="Spalte 10">Inhalt Zeile 1</td></tr>
<tr class="table_row_0" data-mykey-row="Objekt 2"><td data-mykey-column="Spalte 1">Inhalt Zeile 2</td><td data-mykey-column="Spalte 2">Inhalt Zeile 2</td><td data-mykey-column="Spalte 3">Inhalt Zeile 2</td><td data-mykey-column="Spalte 4">Inhalt Zeile 2</td><td data-mykey-column="Spalte 5">Inhalt Zeile 2</td><td data-mykey-column="Spalte 6">Inhalt Zeile 2</td><td data-mykey-column="Spalte 7">Inhalt Zeile 2</td><td data-mykey-column="Spalte 8">Inhalt Zeile 2</td><td data-mykey-column="Spalte 9">Inhalt Zeile 2</td><td data-mykey-column="Spalte 10">Inhalt Zeile 2</td><td data-mykey-column="Spalte 10">Inhalt Zeile 2</td><td data-mykey-column="Spalte 10">Inhalt Zeile 2</td><td data-mykey-column="Spalte 10">Inhalt Zeile 2</td><td data-mykey-column="Spalte 10">Inhalt Zeile 2</td><td data-mykey-column="Spalte 10">Inhalt Zeile 2</td><td data-mykey-column="Spalte 10">Inhalt Zeile 2</td><td data-mykey-column="Spalte 10">Inhalt Zeile 2</td><td data-mykey-column="Spalte 10">Inhalt Zeile 2</td><td data-mykey-column="Spalte 10">Inhalt Zeile 2</td><td data-mykey-column="Spalte 10">Inhalt Zeile 2</td><td data-mykey-column="Spalte 10">Inhalt Zeile 2</td><td data-mykey-column="Spalte 10">Inhalt Zeile 2</td></tr>
<tr class="table_row_0" data-mykey-row="Objekt 3"><td data-mykey-column="Spalte 1">Inhalt Zeile 3</td><td data-mykey-column="Spalte 2">Inhalt Zeile 3</td><td data-mykey-column="Spalte 3">Inhalt Zeile 3</td><td data-mykey-column="Spalte 4">Inhalt Zeile 3 lorem ipsum lorem ipsum</td><td data-mykey-column="Spalte 5">Inhalt Zeile 3</td><td data-mykey-column="Spalte 6">Inhalt Zeile 3</td><td data-mykey-column="Spalte 7">Inhalt Zeile 3</td><td data-mykey-column="Spalte 8">Inhalt Zeile 3</td><td data-mykey-column="Spalte 9">Inhalt Zeile 3</td><td data-mykey-column="Spalte 10">Inhalt Zeile 3</td></tr>
<tr class="table_row_0" data-mykey-row="Objekt 4"><td data-mykey-column="Spalte 1">Inhalt Zeile 4</td><td data-mykey-column="Spalte 2">Inhalt Zeile 4</td><td data-mykey-column="Spalte 3">Inhalt Zeile 4</td><td data-mykey-column="Spalte 4">Inhalt Zeile 4</td><td data-mykey-column="Spalte 5">Inhalt Zeile 4</td><td data-mykey-column="Spalte 6">Inhalt Zeile 4</td><td data-mykey-column="Spalte 7">Inhalt Zeile 4 lorem ipsum lorem ipsum</td><td data-mykey-column="Spalte 8">Inhalt Zeile 4</td><td data-mykey-column="Spalte 9">Inhalt Zeile 4</td><td data-mykey-column="Spalte 10">Inhalt Zeile 4</td></tr>
<tr class="table_row_0" data-mykey-row="Objekt 5"><td data-mykey-column="Spalte 1">Inhalt Zeile 5</td><td data-mykey-column="Spalte 2">Inhalt Zeile 5</td><td data-mykey-column="Spalte 3">Inhalt Zeile 5</td><td data-mykey-column="Spalte 4">Inhalt Zeile 5</td><td data-mykey-column="Spalte 5">Inhalt Zeile 5</td><td data-mykey-column="Spalte 6">Inhalt Zeile 5</td><td data-mykey-column="Spalte 7">Inhalt Zeile 5</td><td data-mykey-column="Spalte 8">Inhalt Zeile 5</td><td data-mykey-column="Spalte 9">Inhalt Zeile 5</td><td data-mykey-column="Spalte 10">Inhalt Zeile 5</td></tr>
<tr class="table_row_0" data-mykey-row="Objekt 6"><td data-mykey-column="Spalte 1">Inhalt Zeile 6</td><td data-mykey-column="Spalte 2">Inhalt Zeile 6</td><td data-mykey-column="Spalte 3">Inhalt Zeile 6 lorem ipsum lorem ipsum</td><td data-mykey-column="Spalte 4">Inhalt Zeile 6</td><td data-mykey-column="Spalte 5">Inhalt Zeile 6</td><td data-mykey-column="Spalte 6">Inhalt Zeile 6</td><td data-mykey-column="Spalte 7">Inhalt Zeile 6</td><td data-mykey-column="Spalte 8">Inhalt Zeile 6</td><td data-mykey-column="Spalte 9">Inhalt Zeile 6</td><td data-mykey-column="Spalte 10">Inhalt Zeile 6</td></tr>
<tr class="table_row_0" data-mykey-row="Objekt 7"><td data-mykey-column="Spalte 1">Inhalt Zeile 7</td><td data-mykey-column="Spalte 2">Inhalt Zeile 7</td><td data-mykey-column="Spalte 3">Inhalt Zeile 7</td><td data-mykey-column="Spalte 4">Inhalt Zeile 7</td><td data-mykey-column="Spalte 5">Inhalt Zeile 7</td><td data-mykey-column="Spalte 6">Inhalt Zeile 7</td><td data-mykey-column="Spalte 7">Inhalt Zeile 7</td><td data-mykey-column="Spalte 8">Inhalt Zeile 7</td><td data-mykey-column="Spalte 9">Inhalt Zeile 7</td><td data-mykey-column="Spalte 10">Inhalt Zeile 7</td></tr>
<tr class="table_row_0" data-mykey-row="Objekt 8"><td data-mykey-column="Spalte 1">Inhalt Zeile 7</td><td data-mykey-column="Spalte 2">Inhalt Zeile 7</td><td data-mykey-column="Spalte 3">Inhalt Zeile 7</td><td data-mykey-column="Spalte 4">Inhalt Zeile 7</td><td data-mykey-column="Spalte 5">Inhalt Zeile 7</td><td data-mykey-column="Spalte 6">Inhalt Zeile 7</td><td data-mykey-column="Spalte 7">Inhalt Zeile 7</td><td data-mykey-column="Spalte 8">Inhalt Zeile 7</td><td data-mykey-column="Spalte 9">Inhalt Zeile 7</td><td data-mykey-column="Spalte 10">Inhalt Zeile 7</td></tr>

</tbody>
</table>

这里的问题是标题不是固定的-因此，当我在表中滚动时，标题也会滚动。我如何轻松解决该问题？如果有人可以找到解决方案，那我可以用CSS hack修复它，这将是很好的。我读了一个引导程序，但是必须有一个更简单的解决方案？

谢谢！