0

i need to show the user the header column all the time, so if we place header below the header, then while scrolling down, the header will remain constant. i bring up the scroll bar but unable to bring it below the header region.

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;
}

Please help me to resolve it.

Hariharan
  • 3,191
  • 4
  • 19
  • 31
  • `position:fixed` for the header? Not sure what you are asking tbh – Pete Mar 20 '14 at 14:58
  • possible duplicate of [How to scroll table's "tbody" independent of "thead"?](http://stackoverflow.com/questions/8321849/how-to-scroll-tables-tbody-independent-of-thead) – Andy E Mar 20 '14 at 14:59
  • how to assign position:fixed on the header in the above code? @Pete here im creating the table on the function. – Hariharan Mar 20 '14 at 15:01
  • @AndyE in the above code, im not using thead and tbody. i already visited the above mentioned link, but it wont solve my plm – Hariharan Mar 20 '14 at 15:02
  • @Hariharan: you should use `` and ``, IIRC the latter is even implicitly created for you in some browsers/situations. – Andy E Mar 20 '14 at 17:01

1 Answers1

0

If I understand your question correctly, this may work for you:

Demo Fiddle

You give the #tableColumns position fixed, and size it correctly. Then you have to give the 2nd tr in your table padding top to compensate for the fixed tr. 

tbody tr:nth-child(2) td{
    padding-top: 25x
}
#tableColumns {
    width: 340px;
    position: fixed;
    overflow: hidden;
    margin-top: -2px;
}
badAdviceGuy
  • 2,060
  • 1
  • 16
  • 12