How to Freeze header rows in HTML table
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:
Code:
{
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!
Re: How to Freeze header rows in HTML table
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:
Code:
th#tdFixedHeader
{
position:relative;
top: expression(document.getElementById("divMyDiv").scrollTop); /*IE5+ only*/
}
an alternative solution is to have the following stylesheet entry
Code:
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.
Re: How to Freeze header rows in HTML table
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
Re: How to Freeze header rows in HTML table
Welcome to the forums askQue. :wave:
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.
Re: How to Freeze header rows in HTML table
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.
Re: How to Freeze header rows in HTML table
You may want to look at this jquery plugin -
http://plugins.jquery.com/project/floatobject