SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with fixed table header

    Hi all,

    I'm having some trouble implementing a fixed table header in Javascript with jQuery. Wondering if anyone has ever seen what I'm seeing and what they did to fix the problem.

    First, the code is here: http://billf.org/work/tables/table.html

    There's an external stylesheet, and all JS code is at the bottom of the HTML file.

    Not only is this code broken, it's broken in one way in IE7, another in IE8, and still another in Mozilla/Webkit. I.e., three ways in total. I'm hoping that once the issue is solved, all the problems will go away.

    OK. So if you scroll the webpage, the header row becomes sticky once the window's scrollTop is greater than the table's top offset, so that the column headers are still visible as the user scrolls down the page. The problem is that the overflow-x and text-overflow properties of the thead element are no longer respected once thead becomes fixed, and thus the header columns blow out and are no longer in line with the content beneath them.

    Any help explaining what's going on, and how to get around it would be greatly appreciated.

    Many thanks in advance!

    --Bill

  2. #2
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Should I post this in the CSS forum instead?

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by bllfrnch View Post
    Should I post this in the CSS forum instead?
    That might be a good idea. Moving the thread over now.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    I think you'll have to do something like this:

    Code:
    <style>
    .pinned tr {
    	display:block;
    	margin:0 -3px 0 -1px;
    	overflow:hidden;
    	background:#ccc;
    	border-right:1px solid #999
    }
    .pinned th {
    	float:left;
    	margin:0 -1px 0 0;
    }
    </style>
    <!--[if IE ]>
    <style>
    .pinned th{float:left;margin:0}
    </style>
    <![endif]-->
    It's still a pixel or so out and doesn't work in IE7 though.


Tags for this Thread

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
  •