«

This beautiful code allows a table header to be not scrollable in IE.
Since Firefox does not support this CSS method expression(...), the
code does not do the desired work in Firefox or other Mozilla browsers.
What is the workaround here? I tried position: fixed for Mozilla, but
it is making my table header unrelevant to the table, as if these are
two different objects.

<div style="overflow:auto; height:100px;">
<table cellspacing="0" cellpadding="0" width="100%">
<thead>
<tr style="position:relative;
top:expression(this.offsetParent.scrollTop);backgr ound-color:#dddddd;">
<th nowrap>Header A</th>
<th nowrap>Header B</th>
<th nowrap>Header C</th>
</tr>
</thead>
<tbody>

<tr><td>aaaaaaaaaaaaaaaaaaa</td><td>b</td><td>ccccccccccccccccccc</td></tr>
<tr><td>a</td><td>bbbbbbb</td><td>c</td></tr>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>a</td><td>b</td><td>c</td></tr>
</tbody>
</table>
</div>

wrote:

>This beautiful code allows a table header to be not scrollable in IE.
>Since Firefox does not support this CSS method expression(...), the
>code does not do the desired work in Firefox or other Mozilla browsers.
>What is the workaround here? I tried position: fixed for Mozilla, but
>it is making my table header unrelevant to the table, as if these are
>two different objects.

In Firefox you can use the <tbody> element to surround the body of the
table and use appropriate CSS to make it scrollable:
<table>
<thead>
<tr bgcolor="#FFFFCC">
<td align="center">
Respondent Name
</td>
<td align="center">
Company Name
</td>
<td align="center">
Solicitation Number
</td>
</tr>
</thead>
<tbody style="overflow:auto;height:200px;width:100%">

<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>

<tr>
<td align="center">102903</td>
<td align="center">102903</td>
<td align="center">215872324</td>
</tr>
</tbody>
</table>

IE doesn't properly handle style="overflow" in <tbody>. (I don't know
whether this is fixed in IE7.) If there's a way that works in both
browsers, I don't know what it is.

--
Tim Slattery

It's amazing. So simple and perfect.
Though I did come across some problems. My page does a 10 sec refresh
and when innerHTML repaints the table, flickering caused by scrollbars
occurs. This is not visible if no scrollbars are shown. But I will see
if there is a way to handle this.
Thanks a lot.