problem with positioning when changing style

poadi · Joined: 14 Mar 2006 Posts: 1

hi,
i want to write a table in which the header doesn't move when the table is scrolled down, and that also allows dynamic change in the content styling.
i need it to work in explorer.

i tried the following code:

-------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="language" content="en-us" />

<style type="text/css">

</style>
<script>
function setData(){
var html = new Array();
html[html.length] = "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" class=\"scrollTable\"><thead class=\"fixedHeader\"><tr><td>bbb</td></tr><tr><td>aaaa</td></tr></thead><tbody class=\"scrollContent\" id=\"scrollContent\">";
for(var i =0;i<30;i++){
html[html.length] = "<tr id=row"+i+" onmouseover='highlightRow("+i+")' onmouseout='unhighlightRow("+i+")'><td id='cell"+i+"' class='noHighlight'>bla bla"+i+"</td></tr>"
}
html[html.length] = "</tbody></table>";
document.getElementById('tableContainer').innerHTML = html.join("");
}

function highlightRow(i){

document.getElementById("cell"+i).className = "highlight"
}

function unhighlightRow(i){

document.getElementById("cell"+i).className = "noHighlight";
}
</script>
</head><body onload="setData()">

<div id="tableContainer" class="tableContainer">

</div>

</body></html>

----------------------------------------------------------

the problem is when i scroll the table, and then go over a row, the positioning of the thead is lost.
any ideas on how i can avoid it, or how i can do it differently?
thanks,
ohad.

paul · Joined: 11 Oct 2004 Posts: 128

Do you have the page published online? If yes, please post the URL here.

Paul
_________________
World Countries | Survival Skills