IE: The Incredible Jumping Table Header

Disclaimer: As it says in the title, this is targeted at Internet Explorer only. That's a perk of doing internal development - it makes life a little easier when dealing with stuff like this.

Disclaimer 2: I can reproduce this in IE7 and IE6. I have not tried IE8, as this is not available for us in our corporate environment.

My goal is to create a table where the content scrolls while keeping the THEAD fixed. There are a lot of different ways one can accomplish this; you can see my approach at the bottom of this post. Unfortunately, I don't have a place to publicly host this example, but you can copy and paste it here to test it out: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_parse

So if you scroll the table down, and the hover the mouse over the first cell in the table, you'll see the phenomena I'm talking about: the header row jumps up!

Here's where it gets fun. The table is being rendered by a third-party ASP.NET control. So I can't alter the HTML that is getting emitted; only the CSS. Using the IE7 developer's toolbar, I can tell that the class of the control is changing as I mouse over it (a new class is being added to it). Oddly enough, the toolbar does not show any onmouseover or onmouseleave events on the header, just something it calls _events and control, which are both [Object]. The source doesn't reveal anything useful either.

So my goal is to prevent this header row jump using only CSS. Is this even possible? And if it's possible, can it be done without CSS expressions (which I'm desperately trying to avoid)?

Here is the sample HTML which emulates what I'm seeing.

Paste here to test: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_parse

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<style type="text/css">
.ScrollContainer
{
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 auto;
    width: 100% !important;
    max-height: 275px;
    border-bottom: solid 1px #009DD9;
}

.ScrollContainer .MasterTable
{
    width: auto !important;
}

.ScrollContainer table
{
    table-layout: fixed; 
}

.ScrollContainer .GridHeader
{
    position:relative;
    top: 0px;
    border-top: solid 1px #009DD9;
    border-right: solid 1px #009DD9;
    border-bottom: solid 1px #009DD9;
    border-left: solid 1px #009DD9;
    background: #cccccc;
}

#Spacer
{
    height: 350px;
}

.GridHeader
{
    height: 30px !important;
}

</style>
</head>
<body>
<div id="Spacer"></div>
<div class="ScrollContainer">
<div class="Dummy">
<div class="Grid">
<table class="MasterTable">
<colgroup>
<col/><col/><col/><col/><col/><col/>
</colgroup>
<thead><tr>
<th class="GridHeader" onMouseEnter="this.className = this.className + ' GridOver';" onMouseLeave="this.className = this.className.replace(' GridOver', '');" ><a href="#" style="GridLink">Column 1</a></th>
<th class="GridHeader"><a href="#" style="GridLink">Column 2</a></th>
<th class="GridHeader"><a href="#" style="GridLink">Column 3</a></th>
<th class="GridHeader"><a href="#" style="GridLink">Column 4</a></th>
<th class="GridHeader"><a href="#" style="GridLink">Column 5</a></th>
<th class="GridHeader"><a href="#" style="GridLink">Column 6</a></th></tr>
</thead>
<tbody>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
<tr><td>A</td><td>B</td><td>X</td><td>D</td><td>E</td><td>F</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>

I understand that your question specifies that the change be made strictly through CSS. I suggest JQuery solutions because using JQuery one can make CSS changes after a document has loaded.

The modestly-named Stupid fixed header is a JQuery plugin that allows both vertical and horizontal scrolling.

Suprotim Agarwal shows a JQuery approach specifically for an ASP.NET GridView here.

It is possible that JQuery will also allow you to in effect modify the HTML generated by the ASP control, because you can in your JavaScript simply grab the table after the ASP control has prepared it and stuff it with attributes. It depends on the timing and how aware the ASP control is of outsiders manipulating its table through the DOM.

Did the asker not want a CSS only solution?

Lucas Jones 2009-05-13 15:24:17

I am using a self-serving expansive definition of CSS-only, in the sense that although CSS rules in Web 1.0 were applied only by the browser at a time strictly determined by the browser's author, in Web 2.0+ CSS rules may be applied at times determined by the the JavaScript's author.

Thomas L Holaday 2009-05-13 15:33:33

+1 for thinking outside the box and sophistry... =)

David Thomas 2009-05-13 15:49:14

ansaurus

tags:

views:

answers:

IE: The Incredible Jumping Table Header

related questions