Scrollable tables, CSS and fetaures of IE6

I couldn’t leave this alone. A colleague was wrestling with some css to have a number scrollable tables within a larger scrolling area hold their column headers in place.

There were the plenty resources out there that nearly provided the solution, but each step had a draw back.

Did I mention that the target was IE6?

This post got us most of the way there.

Unfortunately, scrolling a table caused the header to bounce around horribly. Which through a bit of trial and error turned out to be caused by setting the background colour of the scrolling div containing the table. (Obvious! How didn’t I see that one straight off?)

Next there was the scroll bars.

class="brush:css">overflow: scroll;

Causes both scrollbars to be always visible. Disabled if they don’t do anything,but always there.

overflow: auto;

Causes just the necessary scrollbar to show.

This was preferable for tables which were only ever going to have vertical scrolling. Unfortunately, when the table only had a couple of rows, there was a scrollbar sized gap on the right.

The fix for that…

div.scrollTableContainer table {
  width: expression(offsetParent.clientWidth+"px");
}

A bit of javascript, dug up from here, to set the width to the visible width.

But these shorter tables also left blank space below them and as found before, we could not set the colour of this space without the horrible jumpy headers!<

Searching around, if became apparent very quickly that css flickering in IE6 was a common problem with possible solutions.

But not quite… everything I found addressed the issues of images flickering, but although the causes of the flicker were the same, the jumping header as a side effect was not.

So, in order to have the desired colour while maintaining…

background-color: transparent;
background-repeat: repeat;

…was to add a small background gif of the desired colour.

No. Jumping headers are back! Seems that there is another IE6 bug whereby the the default background attachment is not implemented correctly.

background-image: url(colour.gif);
background-attachment: fixed;

Should handle that.

So in summary, we needed a bit of Scrolling HTML Table with Fixed Header, followed by a touch of No more IE6 background flicker and topped off with Everything you could possibly want to know about CSS Background Properties, including default values, browser support, targeting the DOM, and what to look for in CSS3.

Not much then.

Next time, I’ll mind my own business.

comments powered by Disqus