d0rkorg

Today at work I was looking into the old annoyance of making tables with scrollbars built in. Normally, since I’m writing in ASP.NET I just have a nice DataGrid and then throw a DIV around it, with a limited height and then assign the overflow-y to something appropriate (scroll or auto).

Now, with this method, you lose your headers when you scroll. It is an obvious side-effect, and if you’ve got a large table with limited scrolling space, it is very annoying to have to go up to the top to see what the columns mean. There is no easy, sure-fire way to fix this across all browsers. FireFox probably behaves the best and lets you scroll on a <tbody> while IE almost requires two tables to make the body scroll how you want it to.

I say IE almost requires the table because just today I ran across this article by a Mr. Geoff Appleby which explains what you need to do to convice IE to play nicely. Essentially, you just make sure IE isn’t rendering in Quirks Mode and then you can use CSS to set position: relative. To implement this in my code, I’ve just got a method that searches through the DataGrid’s controls, looking for the header row (DataGridItem’s ItemType is Header). Then I just set do a quick DataGridItem.Style.Add(”position”, “relative”). Bam! It Just Works^TM. Fortunately I’m working on an IE6-only project, so this is a perfect solution for me :)

I also ran across a more in-depth version, so in-depth that I’m still afraid to view the source.