How to Freeze header rows in HTML table
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 6 of 6

Thread: How to Freeze header rows in HTML table

  1. #1
    Join Date
    Jul 2005
    Posts
    2

    Question 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!
    Last edited by PeejAvery; July 7th, 2008 at 08:49 AM. Reason: Added code tags.

  2. #2
    Join Date
    Jul 2005
    Posts
    2

    Resolved 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.
    Last edited by PeejAvery; July 7th, 2008 at 08:49 AM. Reason: Added code tags.

  3. #3
    Join Date
    Jul 2008
    Posts
    1

    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

  4. #4
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,869

    Re: How to Freeze header rows in HTML table

    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.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  5. #5
    Join Date
    Oct 2009
    Posts
    4

    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.

  6. #6
    Join Date
    Oct 2009
    Posts
    4

    Re: How to Freeze header rows in HTML table

    You may want to look at this jquery plugin -

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  


Azure Activities Information Page

Windows Mobile Development Center


Click Here to Expand Forum to Full Width

This is a CodeGuru survey question.


Featured


HTML5 Development Center