Fixed Position of a Table Header

V

vunet.us

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);background-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>
 
T

Tim Slattery

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.
 
V

vunet.us

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.
 

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,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top