frozen/locked HTML table header

M

matt

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,901
Latest member
Noble71S45

Latest Threads

Top