www.webdeveloper.com
Results 1 to 2 of 2

Thread: Freeze Html Table Headers

  1. #1
    Join Date
    Oct 2006
    Posts
    1

    Freeze Html Table Headers

    Hi,

    Please let me knw the cross browser solution for all freezing the table headers, so that if records are more on scrolling down the page, still i can see the headers.

    Thanks.

  2. #2
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    The first step would be to surround the table headers inside a <thead> tag and put the body of the table inside <tbody> so that the CSS and Javascript that you add to create the effect will know what row(s) make up the heading. The HTML tags look like this:

    <table>
    <thead>
    <tr><th></th><th></th></tr>
    </thead>
    <tbody>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    </tbody>
    </table>

    You will then need to add stylesheet code to apply relative positioning to the table and absolute positioning to the thead.

    Finally you will need Javascript to move the thead down as the table content scrolls under it.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles