
THIS CODE HAS BEEN UPDATED!!
THE CODE EXAMPLES HERE ARE OBSOLTE. PLEASE SEE MY POST FOR THE UPDATED VERSION.
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:
- Valid HTML and CSS
- Tested on Multiple Browsers
- Has a “Bullet Resistant” version that uses Javascript to overcome some problems.
Disadvantages:
- 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.
- 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:
- Works in IE 6, IE 7, Firefox (tested in 2.0.0.1, but assuming it works in 1.5.x too).
- Does not require the column widths to be specified.
- Valid HTML with no extra table or header definitions required.
Disadvantages:
- Has an intermittent problem with fixed header moving left or right 1px in IE.
- Uses the proprietary IE expression() function in the CSS for fixing the header in IE.
- Uses a few CSS hacks (http://www.webdevout.net/articles/css_hacks.php).
- 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;}
Example Code:
Can be downloaded here:
http://rcs-comp.com/blog/scrolling_table.zip
Working Example:
http://rcs-comp.com/blog/scrolling_table/
Recent Comments