Posted by matt@mailinator.com on 12/15/06 21:53

hello,

like many intranet report developers, my users requested to have html
table's headers locked in position -- allowing the <tbody> to scroll,
but the <thead> to remain fixed in place.. similar to an excel document
(i know the web isnt excel, but that doesnt stop my users from wanting
it nonetheless).

i knew that my technical requirements were:

1) worked in IE & firefox
2) was a true table, and used only one table (no multis, frames, div
quasi-tables, etc)
3) used CSS over javascript
4) allowed for multiple scrolling-table instances on a page
5) allowed content-rows to set header widths

i did a bit of research on usenet & the web, and came up w/ something
that worked. its largely based on this fellow's example:

http://web.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html

....with some modifications to remove its named-instances, which makes
for easier multi-use. it uses a CSS expression, which as i understand
it is evaluated on every mouse movement.. however, that proved a
non-issue in our environment, so it seemed better that maintaining my
own javascript.

if you are interested in the technique, its like so (ignore any typos,
the gist is whats important):

<style>
table {
width:100%;
border:solid 1px gray;
}
thead tr { background-color:lavender; }
tfoot td { background-color:lavender; }

.scrollTable {
height:321px; /*must be taller than tbody*/
overflow:auto;
margin:0 auto;
border-bottom:1px solid slategray;
}
.scrollTable table>tbody { /*child selector syntax which IE6 and
older do not support*/
height:235px;
overflow:auto;
overflow-x:hidden;
}
.scrollTable thead tr {
position:relative;

top:expression(this.parentElement.parentElement.parentElement.scrollTop-2);
}
</style>


<div class="scrollTable">
<table border="1">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">footer</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>row data</td>
<td>row data</td>
<td>row data</td>
<td>row data</td>
</tr>
...
</tbody>
</table>
</div>

(repeat tables as necessary)


....its proving useful to my users, and perhaps it could for yours too.

matt

[Back to original message]