How to Freeze header rows in HTML table

[praveenad]

Hi,

In my HTML page - I have a div object (divMyDiv) which has its style set to "overflow:auto". Within this div tag, I am placing an HTML table that is generated through XSLT. The first two rows in this table make up the table's header. I need the header rows to be static when the vertical scroll bar on the div object is moved up or down.

I looked through the forum to see if a similar issue was already addressed, but could not find any pointers.

My application uses only HTML, JavaScript, XSLT and CSS. I tried using the following CSS class as the style for the header <tr> elements:

{
	background-color: #808080;
	font-family:Verdana;
	color: White;
	font-size: 7pt;
	font-weight:bold
	position: relative;
	top: expression(document.getElementById("divMyDiv").scrollTop);
}

But, this does not help.

Could any one tell me how I can achieve my goal or point me in the right direction. Any suggestions greatly appreciated.

Thank you for taking the time!