By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,712 Members | 2,116 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,712 IT Pros & Developers. It's quick & easy.

Fixed Position of a Table Header

P: n/a
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>

Sep 19 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a
vu******@gmail.com 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 <tbodyelement 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
Sl********@bls.gov
Sep 19 '06 #2

P: n/a
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.

Sep 19 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.