javascript - 获取表中标题区域下方的滚动条。注意 : Table wont have thead and tbody

Question

我需要始终向用户显示标题列，因此如果我们将标题放在标题下方，那么在向下滚动时，标题将保持不变。我调出滚动条，但无法将其置于标题区域下方。

JsFiddle:http://jsfiddle.net/99wjn/23/

Javascript:

function load_table() { 
    var cmpLayoutDiv = document.getElementById("tLayout");
    cmpLayoutDiv.innerHTML = "";
    var colHeaderList = ['Name', 'RollNo', 'I', 'II','III', 'IV', 'V','VI', 'VII','VII', 'VIII', 'IX']
    var tableDef = "<table style='border: 1px solid #000000; border-radius: 0; margin: 12px; padding: 0; width: 350px; height:300px; box-shadow: 0; overflow : auto; display: block;'>";
tableDef += "<tr style='border: inherit; background-color:yellow;' id='tableColumns'>";
    for (var i = 0; i < 2; i++) {
        var j = 0;
        if (i == 1) {
            j = 2;
        }
        for (; j < colHeaderList.length; j++) {
            tableDef += "<td>" + colHeaderList[j] + "</td>";
        }
    }
    tableDef += "</tr>";
    for (var i = 0; i < 55 ; i++) {
        tableDef += "<tr>";
        tableDef += "<td>"+ i +"</td>";
        tableDef += "<td>"+ i +"</td>";
        for (var j = 2; j < 12; j++) {
            tableDef += "<td>" + j + "</td>";
        }
        for (var j = 2; j < 12; j++) {
            tableDef += "<td>" + j + "</td>";
        }
        tableDef += "</tr>";
    }
    tableDef += "</table>"
    cmpLayoutDiv.innerHTML = tableDef;

HTML:

<button type="button" onclick="load_table();" > click </button>

<div id="tContainer" class="tContainer">
     <div id="tLayout"></div>
</div>

CSS:

.tContainer {
    background: none repeat scroll 0 0 #FFFFFF;
    border: thin solid;
    margin-left: 9px;
}

请帮我解决一下。

Answer 1

如果我正确理解你的问题，这可能对你有用:

Demo Fiddle

您将 #tableColumns 位置固定，并正确调整大小。然后，您必须在表填充顶部提供第二个 tr 以补偿固定的 tr。

tbody tr:nth-child(2) td{
    padding-top: 25x
}
#tableColumns {
    width: 340px;
    position: fixed;
    overflow: hidden;
    margin-top: -2px;
}