Having trouble with overflow-x in fixed table header

Question

I'm having some trouble implementing a fixed table header with CSS and jQuery, though the problem is really just a CSS one. Wondering if anyone has ever seen what I'm seeing and what they did to fix it.

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.

But you can also duplicate the issue simply by setting thead to position fixed. It's as if overflow-x:hidden is no longer respected once the thead is displayed with a fixed position.

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

Many thanks in advance!

--Bill

It's not overflow-x that's the problem, I don't think, it's the fact that the width is not being obeyed. I think it may be that trying to use "position: fixed" on a table component like that is sort-of playing with fire. Table layout is crazy complicated and that's probably just throwing a wrench into the mechanism. — Pointy
– Pointy, Commented Feb 2, 2012 at 18:34
Pointy's right. By applying position fixed, you're actually separating thead from the rest of the table. I created a jsfiddle for another similar question recently which may (or may not) help. — magicalex
– magicalex, Commented Feb 2, 2012 at 18:55
So because thead is taken out of regular page flow, the assigned widths of the th elements aren't respected any longer? Thanks for your replies. — Willy
– Willy, Commented Feb 2, 2012 at 19:03

Charlie Frank · Accepted Answer · 2012-02-02 18:56:32Z

1

put a div inside all the th's, like this,

<th>
 <div style='overflow:auto;width:85px;'>text goes here</div>
</th>

this will prevent the cell from expanding

or you could take off the "white-space:nowrap;" property on the th tags.

edited Feb 2, 2012 at 18:56

answered Feb 2, 2012 at 18:46

Charlie Frank

765 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Willy Over a year ago

Apologies, Charlie, this works indeed. So I guess instead of dynamically setting the widths of the th elements, I'll set the widths of the child divs. Thank you very much for your help here.

Willy Over a year ago

Also, I'm a very new user and am unable to upvote your solution. Would if I could, sir.

Collectives™ on Stack Overflow

Having trouble with overflow-x in fixed table header

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related