How to: Stationary Table Header with scrolling rows? 1

[jsteph]

I have a simple table with the first row as a 'header' with column descriptions, and the rest of the rows are data values. I want to lock the header, so that when the user scrolls the ie window (since the data-values can be 100's of records), the column names stay.

I've tried an iframe--putting the header row in a separate table of it's own, then creating an iframe with a new table that contains the data rows. I have a form that the table is contained inside, which may be a problem. When I have the below (pseudocode)

<table><tr>header labels</tr></table>
<iframe blah, blah>
<form the table's form >
<table>
<tr><td><input type=text value = Row1--some data></td></tr>
<tr><td><input type=text value = Row2--some data></td></tr>
<tr><td><input type=text value = Row3--some data></td></tr>
</table>
</form>
</iframe>

...I get a blank spot where the iframe is (I have the width & height set correctly, etc.). The form is needed (or maybe it's not--let me know...) because in javascript I need to reference the table cells value, and the only way I know how is to reference the input element via it's containing form:

forms.myform.txtbox.value

...if I could reference directly the table cell or the input element's name, I wouldn't need the form--so that's why the form exists.

Is putting the form in an iframe like this condidered 'tag soup' and is this the possible problem?
Thanks for any insight,
--J

 

[DreXor]

as far as i know, you'll need 2 tables, with set widths for each cell you stack the 2 tables on each other, be it an iframe or a DIV with autoscroll although, it wont be completely reliable on alignment between headers/main body

<table><tr><th width="200">header labels</th></tr></table>
<iframe blah, blah> OR <div style="overflow:auto;text-overflow:clip;width:250;height:200;">
<form the table's form >
<table>
<tr><td width="200"><input type=text value = Row1--some data></td></tr>
<tr><td width="200"><input type=text value = Row2--some data></td></tr>
<tr><td width="200"><input type=text value = Row3--some data></td></tr>
</table>
</form>
</iframe> OR </div>

there are other methods using style sheets and so forth, and methods using THEAD and TBODY to segregate out the sections .. see similar question elsewhere

DreX
aKa - Robert
if all else fails, light it on fire and do the happy dance!

 

[DreXor]

oh, forgot to mention this :

an "old school" method of forcing this is use single pixel images stretched out to force <td> sizes

and last but not least, the "cheep method" :
use JS to rip the thead off the page and put it into a floating div, then make it position relative to the tbody, then have the floater scroll as you do... like a common floating menu


DreX
aKa - Robert
if all else fails, light it on fire and do the happy dance!

 

[DreXor]

.......AND ... here's a blog on it with more detail on the CSS nature

here's a scrolltable javabean/widget

and a somewhat "how to" from bill gates & gang in the bottom right frame click "Out for a SCROLL" for the info, sorry i couldn't link it directly

DreX
aKa - Robert
if all else fails, light it on fire and do the happy dance!

 

[jsteph]

DreXor,
Thanks so much! I used that scrolltable widget and it did exactly what I need with about 2 lines of code! That's perfect.
--Jim

 

[DreXor]

no problem, glad to be of help, the other links are useful if you'd like to understand how/why it works for other things in the future

DreX
aKa - Robert
if all else fails, light it on fire and do the happy dance!