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!

[praveenad]

Well, I did figure out how to accomplish this:

for every cell (in the table header) that needs to be in a fixed position, assign and id (e.g. tdFixedHeader). Also, enter a style sheet entry as:

th#tdFixedHeader
{
	position:relative; 
	top: expression(document.getElementById("divMyDiv").scrollTop); /*IE5+ only*/
}

an alternative solution is to have the following stylesheet entry

th#tdFixedHeader
{
	position:relative; 
	top: expression(document.getElementById("tdFixedHeader").parentElement.parentElement.parentElement.parentElement.scrollTop); /*IE5+ only*/
}

The second style sheet entry basically functions the same as the first one, but is more re-usable for other similar divs (with same requirements) in the application.

[askQue]

hey,

can u pls explain with full code..
am not able to make it work, by the way I use MSIE..


Thanks in advance,
askQue

[PeejAvery]

Welcome to the forums askQue.

You will notice that this thread is 2 years old, and these are the only two posts by this user. You will most likely not receive a reply.

Rather than hijack someone else's thread, please create a new thread clearly explaining your problem.

[shreekantp]

Try out jquery.. there is a plugin for this very purpose: http://plugins.jquery.com/project/floatobject
There is a demo@ http://amirharel.com/labs/fo/float_demo.html

I haven't used this plugin yet myself, but i feel this may be the one for the job.

[shreekantp]

You may want to look at this jquery plugin -

http://plugins.jquery.com/project/floatobject