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

Answer 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.