Help with fixed table header

HTML & CSS
1

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

Should I post this in the CSS forum instead?

3

That might be a good idea. Moving the thread over now.

4

Hi,

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


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