SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Freeze table headers pure CSS?

    I have large, dynamically driven tables with columns of varying widths. I was hoping to find a pure CSS way to implement this but so far all I've found are solutions for tables with fixed column widths. Is there a way to freeze table headers when you have tables with variable width columns?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,759
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Here you go.

    We had a quiz on this not too long ago.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent quiz! Is there a solution that doesn't require a fixed table height? What I'm hoping for is to allow the table to extend however far it needs to but to be able to scroll while keeping the header in place. I don't really need a footer.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,759
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Then don't put a footer in there. And you don't want a height...but when do you want scrolling...?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just regular page scrolling. There's a js example here but was hoping to to it without js:

    http://cross-browser.com/x/examples/xthf.html

    The problem is that I'm building an application for many users so the table lengths may vary widely. Some users may only have 2 or 3 rows in a table - others may have several hundred. I'm trying to find a fix that won't affect the look of the page for users with only a few rows, but that will kick in the header freeze for longer tables. I'm open to other ideas.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,759
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    In Opera it is glitchy a little bit. And no as far as I know there are no ways.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, thanks. I may end up using the one above - just need to play with it a bit in my head.

  8. #8
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Probably a dumb question but I assume there's no way to add a min-height kind of thing so I could set the table at 6 or 7 rows for the default and then have it stretch for users with more data?

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,759
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    min-height wil still allow for expansion and thus you will have to set a max-height in conjunction with that to stop it at a certain point to allow the scrollbars to take effect.

    You will need an expression for IE6 though.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok - well, that would take care of some of my reservations. What's the IE6 fix for that?

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,759
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    What's the IE6 fix for what?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  12. #12
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You said that I'd need an expression for IE6 - wasn't sure what you meant.

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,759
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Yes you need an expression for max-height. View the FAQs at the top of this thread on how t odo that. Or just google "IE6 max-height expression". There are many articles on this.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

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