469,626 Members | 871 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,626 developers. It's quick & easy.

frozen/locked HTML table header

hello,

like many intranet report developers, my users requested to have html
table's headers locked in position -- allowing the <tbodyto scroll,
but the <theadto 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/e...le-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.pa rentElement.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

Dec 15 '06 #1
0 8037

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Bardolator | last post: by
1 post views Thread by Dudley Joseph | last post: by
3 posts views Thread by rvanvolken | last post: by
5 posts views Thread by breal | last post: by
3 posts views Thread by Bob Bedford | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.