freeze the header of a table
Hi,
i try to freeze the header of table an make tbody scrollable, to do this i try to add thead to table and make tbody scrollable, i add this code on the onload of the page
myTable = document.getElementById("form1:table1");
myTrElements = myTable.getElementsByTagName("tr");
myCaption = myTable.getElementsByTagName("caption");
myTbodyElements = myTable.getElementsByTagName("tbody");
var tbody = myTbodyElements[0];
var thead = document.createElement("thead");
myTable.insertBefore(thead, tbody);
caption = myCaption[0];
thead.appendChild(caption);
tr = myTrElements[0];
thead.appendChild(tr);
tbody.className="scrollContent";
in the css file i add
html > body tbody.scrollContent{
display:block;
height:50px;
overflow:scroll;
}
in the dom inspector(firebug) it work like i expected, in the thead i have the caption and the tr of the columns headers, the rest of tr's in the tbody. But the result it's not what i want, can be somebody could know how to finish that.
Regards
Walid
