Scrolling HTML Table with Fixed Header

Some History:

On a recent project it was necessary for me to find a solution to display a bunch of rows in an HTML table that scrolled and had fixed headers. I, of course, started with a Google search and based my first solution of the technique identified here:

http://www.imaputz.com/cssStuff/bigFourVersion.html

Advantages:

1. Valid HTML and CSS
2. Tested on Multiple Browsers
3. Has a “Bullet Resistant” version that uses Javascript to overcome some problems.

Disadvantages:

1. In Firefox, the width of the <th> and <td> elements are not the same. This requires that each and every column have fixed width (which is quite annoying to say the least). If the table had a lot of columns, this solution would probably not work.
2. Does not work in IE 7.

Another solution I found was here:

http://home.tampabay.rr.com…nonscroll-table-header.html

I ended up having to tweek the code a little to get it working correctly in IE 7 while still displaying with pixel perfect accuracy in Firefox and IE 6. The above had problems in non-quirks mode in IE with the fixed header not moving when the page was scrolled.

Advantages:

1. Works in IE 6, IE 7, Firefox (tested in 2.0.0.1, but assuming it works in 1.5.x too).
2. Does not require the column widths to be specified.
3. Valid HTML with no extra table or header definitions required.

Disadvantages:

1. Has an intermittent problem with fixed header moving left or right 1px in IE.
2. Uses the proprietary IE expression() function in the CSS for fixing the header in IE.
3. Uses a few CSS hacks (http://www.webdevout.net/articles/css_hacks.php).
4. If the CSS is embedded directly in the page (i.e. in a <style> block), then IE will give the user an “active content” warning and the scrolling table will not work until they click “allow blocked content”.

HTML:

<div class=”scrollTableContainer”>
<table class=”dataTable” cellspacing=”0″>
<thead>
<tr>
<th>Station</th>
<th>Date</th>
<th>Status</th>
<th>Num.</th>
</tr>
</thead>
<tbody>
<tr>
<td>KABC</td>
<td>09/12/2002</td>
<td>Submitted</td>
<td>0</td>

</tr>
<tr>
<td>KCBS</td>
<td>09/11/2002</td>
<td>Lockdown</td>
<td>2</td>
</tr>

…

<tr>
<td>WRRR</td>

<td>02/19/2002</td>
<td>Submitted</td>
<td>5</td>
</tr>

</tbody>
</table>

</div>

CSS:
div.scrollTableContainer {
height: 285px;
overflow: auto;
width: 970px;
margin: 15px 0 0 0;
position: relative;
}

/* The different widths below are due to the way the scroll bar is implamented */

/* All browsers (but especially IE) */
div.scrollTableContainer table {
width: 952px;
}

/* Modern browsers (but especially firefox ) */
html>/**/body div.scrollTableContainer table {
width: 970px;
}

/* Modern browsers (but especially firefox ) */
html>/**/body div.scrollTableContainer table>tbody {
overflow: auto;
height: 250px;
overflow-x: hidden;
}

div.scrollTableContainer thead tr {
position:relative;
top: expression(offsetParent.scrollTop); /*IE5+ only*/
/* fixes the header being over too far in IE, doesn’t seem to affect FF */
left: 0px;
}

/*prevent Mozilla scrollbar from hiding cell content*/
div.scrollTableContainer td:last-child {padding-right: 20px;}

Code Update:

I made some improvements to the code and posted them, but people continue to come to this page, so I have posted the same information here too.

Improvements:

• Fixed the 1px “shift” noticed in IE when scrolling the table content
• Conditional comments include the invalid “expression” syntax for IE only. That means we have valid CSS 3.0.

Continuing Disadvantages:

• The “expression” syntax in the IE style sheet is technically Javascript. Therefore, anyone using IE with Javascript turned off will not get the fixed headers, the scrolling table will work.

Working Example:

http://rcs-comp.com/blog/scrolling_table/

Explore posts in the same categories: CSS, HTML, XHTML