Static Column Header with Scrolling Records

[Demon148]

Hello everyone,
I have a page with 3 Frames
I would like the 2nd Frame or Middle Frame to Be have Column headers in it so that the user can Scroll in the 3rd bottom frame which has all of the Records in it. I know that i could just set the bottom frame to like 20 records and have them just navigate between the pages in the display. Basically im wondering if any one has a solution for the mismatch in the Column width size for each frame. Tried using 100% on both pages but the bottom frame has the scroll bar and the middle frame does not. The widths must be able to compensate for browser window size. The easy solution would be to just give the middle frame a scroll bar also but it kind of defeats the purpose of what im looking for.
On a side note im planning to use cookies to sort the records based on the column heading in the middle frame.
FYI, im using Dreamweaver MX & ColdFusion MX.

Thank you in advance,
Brad

 

[boyfromoz]

More than one way to skin a cat

Done without frames

http://www.koonyumretreat.com/chalet.html

 

[CliveC]

You might try using position:relative to set the leftmost position of each column.

Clive

http://tubularity.com

 

[Demon148]

nippi,

Thanks for the site suggestion, it has the right general idea i was looking for but i could only use the scrolling feature when it was nesteded with a <TD> <div class=&quot;div3&quot;> </div></td> and not a <tr>. The CSS does not work within a TR for some reason. Any suggestions ? Basically I need it to have the static header with about 10 columns in that row and then the next row (110 columns) needs to scroll with it so that each columns width is matched with the column headers width. i would like it to be in % so that larger column values like with a long name would make the header and the display width the same size.
For Example: [V] would be the scroll bar

Header | ID | Name | Address |
-----------------------------------
Display |{ID}|{name}|{address}|[V]


Hope this gives a better idea of what im trying to accomplish thank you for any future input.

 

[boyfromoz]

yes, can't fix a table row, then scroll the rest. Got to fix another table above it, then you've got issues o lining everything up.

Copy adnapste this into your page and ahve a squiz, it might be helpful

<table width=&quot;95%&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
<tr>
<td>
<table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot; 0&quot; cellpadding=&quot; 0&quot;>
<tr>
<td><img border=&quot;0&quot; src=&quot;images/spacer.gif&quot; width=&quot;1&quot; height=&quot;1&quot;></td>
<td align=&quot;right&quot;><img border=&quot;0&quot; src=&quot;images/spacer.gif&quot; width=&quot;1&quot; height=&quot;1&quot;></td>
</tr>
<tr>
<td>&nbsp; </td>
<td align=&quot;right&quot;>
<table border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
<tr>
<td>&nbsp;</td>
<td>
<table border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
<tr>
<td><img border=&quot;0&quot; src=&quot;images/spacer.gif&quot; width=&quot;1&quot; height=&quot;1&quot;></td>
<td bgcolor=&quot;#000000&quot;>
<table border=&quot;0&quot; height=&quot;22&quot; cellspacing=&quot;1&quot; cellpadding=&quot;0&quot;>
<tr>
<td bgcolor=&quot;#CCCCFF&quot; class=&quot;white&quot;>
<p style=&quot;margin-left: 5; margin-right: 5&quot;> Edit
selected Group </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr> </tr>
<tr>
<td height=&quot;5&quot;>
<div align=&quot;center&quot;>
<center>
<table border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; width=&quot;100%&quot;>
<tr>
<td>
<table border=&quot;0&quot; width=&quot;100%&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
<tr>
<td width=&quot;100%&quot; bgcolor=&quot;#000000&quot;>
<table border=&quot;0&quot; width=&quot;100%&quot; cellspacing=&quot;1&quot; cellpadding=&quot;0&quot;>
<tr>
<td width=&quot;100%&quot; bgcolor=&quot;FFA540&quot;>
<table border=&quot;0&quot; width=&quot;100%&quot; cellspacing=&quot;5&quot; cellpadding=&quot;0&quot;>
<tr>
<td width=&quot;4%&quot; align=&quot;left&quot; height=&quot;15&quot;></td>
<td width=&quot;32%&quot; align=&quot;left&quot; height=&quot;15&quot;><b>Master
Product Code</b></td>
<td width=&quot;32%&quot; align=&quot;left&quot; height=&quot;15&quot;><b> Master
Product Name</b></td>
<td width=&quot;32%&quot; align=&quot;left&quot; height=&quot;15&quot;><b>Products
in this Group</b></td>
</tr>
<!--
<tr>
<td width=&quot;25&quot; align=&quot;left&quot;></td>
<td width=&quot;100&quot;><a href=&quot;products.php?showproduct=yes&sb=code&so=asc&quot;>A-Z</a>
| <a href=&quot;products.php?showproduct=yes&sb=code&so=desc&quot;>Z-A</a></td>
<td width=&quot;100&quot;><a href=&quot;products.php?showproduct=yes&sb=name&so=asc&quot;>A-Z</a>
| <a href=&quot;products.php?showproduct=yes&sb=name&so=desc&quot;>Z-A</a></td>
</tr>
-->
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img border=&quot;0&quot; src=&quot;images/spacer.gif&quot; width=&quot;1&quot; height=&quot;1&quot;></td>
</tr>
<tr>
<td>
<div style=&quot;height:250px;width :100%;overflow:auto;&quot;>
<table border=&quot;0&quot; width=&quot;100%&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
<tr>
<td width=&quot;100%&quot; bgcolor=&quot;#000000&quot;>
<table border=&quot;0&quot; width=&quot;100%&quot; cellspacing=&quot;1&quot; cellpadding=&quot;0&quot;>
<tr>
<td width=&quot;100%&quot; bgcolor=&quot;#FFBB71&quot;>
<form name=&quot;masterfrm&quot; method=&quot;post&quot; action=&quot;products_to_groups.php#main&quot;>
<table border=&quot;0&quot; width=&quot;100%&quot; cellspacing=&quot;5&quot; cellpadding=&quot;0&quot;>
<tr>
<td width=&quot;4%&quot; align=&quot;center&quot; valign=&quot;top&quot;>
<input type=&quot;radio&quot; name=&quot;groupid&quot; <?php if($loopcnt==1) echo &quot;checked&quot;; ?>>
</td>
<td width=&quot;32%&quot; align=&quot;left&quot; valign=&quot;top&quot;> sdfsdf </td>
<td width=&quot;32%&quot; align=&quot;left&quot; valign=&quot;top&quot;> sdf </td>
<td width=&quot;32%&quot; valign=&quot;top&quot;>
s</td>
</tr>
<tr>
<td align=&quot;center&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>sdf</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td valign=&quot;top&quot;>&nbsp;</td>
</tr>
<tr>
<td align=&quot;center&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>sdf</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td valign=&quot;top&quot;>&nbsp;</td>
</tr>
<tr>
<td align=&quot;center&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>sdf</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td valign=&quot;top&quot;>&nbsp;</td>
</tr>
<tr>
<td height=&quot;29&quot; align=&quot;center&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td valign=&quot;top&quot;>&nbsp;</td>
</tr>
<tr>
<td align=&quot;center&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td valign=&quot;top&quot;>&nbsp;</td>
</tr>
<tr>
<td align=&quot;center&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td valign=&quot;top&quot;>&nbsp;</td>
</tr>
<tr>
<td align=&quot;center&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td valign=&quot;top&quot;>&nbsp;</td>
</tr>
<tr>
<td align=&quot;center&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td valign=&quot;top&quot;>&nbsp;</td>
</tr>
<tr>
<td align=&quot;center&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td valign=&quot;top&quot;>&nbsp;</td>
</tr>
<tr>
<td align=&quot;center&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td valign=&quot;top&quot;>&nbsp;</td>
</tr>
<tr>
<td align=&quot;center&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td valign=&quot;top&quot;>&nbsp;</td>
</tr>
<tr>
<td align=&quot;center&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td valign=&quot;top&quot;>&nbsp;</td>
</tr>
<tr>
<td align=&quot;center&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td valign=&quot;top&quot;>&nbsp;</td>
</tr>
<tr>
<td align=&quot;center&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td valign=&quot;top&quot;>&nbsp;</td>
</tr>
<tr>
<td align=&quot;center&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td valign=&quot;top&quot;>&nbsp;</td>
</tr>
<tr>
<td align=&quot;center&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td valign=&quot;top&quot;>&nbsp;</td>
</tr>
<tr>
<td align=&quot;center&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td valign=&quot;top&quot;>&nbsp;</td>
</tr>
<tr>
<td align=&quot;center&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td valign=&quot;top&quot;>&nbsp;</td>
</tr>
<tr>
<td align=&quot;center&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td valign=&quot;top&quot;>&nbsp;</td>
</tr>
<tr>
<td align=&quot;center&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td valign=&quot;top&quot;>&nbsp;</td>
</tr>
<tr>
<td align=&quot;center&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td valign=&quot;top&quot;>&nbsp;</td>
</tr>
<tr>
<td align=&quot;center&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td valign=&quot;top&quot;>&nbsp;</td>
</tr>
<tr>
<td align=&quot;center&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td valign=&quot;top&quot;>&nbsp;</td>
</tr>
<tr>
<td align=&quot;center&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td valign=&quot;top&quot;>&nbsp;</td>
</tr>
<tr>
<td align=&quot;center&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td align=&quot;left&quot; valign=&quot;top&quot;>&nbsp;</td>
<td valign=&quot;top&quot;>&nbsp;</td>
</tr>

</table>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td><img border=&quot;0&quot; src=&quot;images/spacer.gif&quot; width=&quot;1&quot; height=&quot;1&quot;></td>
</tr>
<tr>
<td height=&quot;20&quot; align=&quot;center&quot;>&nbsp; </td>
</tr>
</table>
</center>
</div>
</td>
</tr>
</table>