Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Fixed Position of a Table Header

Reply
Thread Tools

Fixed Position of a Table Header

 
 
vunet.us@gmail.com
Guest
Posts: n/a
 
      09-19-2006
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>

 
Reply With Quote
 
 
 
 
Tim Slattery
Guest
Posts: n/a
 
      09-19-2006
http://www.velocityreviews.com/forums/(E-Mail Removed) 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
(E-Mail Removed)
 
Reply With Quote
 
 
 
 
vunet.us@gmail.com
Guest
Posts: n/a
 
      09-19-2006
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.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Position:fixed header in 3 col layout? Bo HTML 4 07-26-2009 10:57 PM
Creating a scrolling table with fixed header The Litwaks HTML 10 01-13-2005 07:26 PM
Fixed & Updated Groupable Table Header Webby Java 0 09-18-2004 01:52 PM
Table Widget for IE? Fixed header, sorting columns, etc Matt Kruse Javascript 17 09-03-2004 12:00 AM
Scrollable table widget with fixed header Mel Javascript 2 07-10-2004 04:34 PM



Advertisments