Issue with overflow scrolling

[stephenScud]

I need to make the first <tr> not scroll with the rest of the <tr>s. This works in IE 7 but not FF 2. What am I doing wrong? Thanks for any ideas in advance.

<div style="height:297px;width:541px;overflow:scroll;">
<table cellspacing="0" cellpadding="0" border="0" width="524" class="claimstable" style="margin-top:-1px;">
<!-- This to not scroll -->
<tr style="position:relative;">
<th>Date Due</th>
<th>Date Paid</th>
<th>Amount Due</th>
<th>Amount Paid</th>
</tr>
<!-- The rest to scroll -->
<tr class="alt_row">
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx.xx&gt;</td>
<td>&lt;xx.xx&gt;</td>
</tr>
<tr>
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx.xx&gt;</td>
<td>&lt;xx.xx&gt;</td>
</tr>
<tr class="alt_row">
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx.xx&gt;</td>
<td>&lt;xx.xx&gt;</td>
</tr>
<tr>
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx.xx&gt;</td>
<td>&lt;xx.xx&gt;</td>
</tr>
<tr class="alt_row">
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx.xx&gt;</td>
<td>&lt;xx.xx&gt;</td>
</tr>
<tr>
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx.xx&gt;</td>
<td>&lt;xx.xx&gt;</td>
</tr>
<tr class="alt_row">
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx.xx&gt;</td>
<td>&lt;xx.xx&gt;</td>
</tr>
<tr>
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx.xx&gt;</td>
<td>&lt;xx.xx&gt;</td>
</tr>
<tr class="alt_row">
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx.xx&gt;</td>
<td>&lt;xx.xx&gt;</td>
</tr>
<tr>
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx.xx&gt;</td>
<td>&lt;xx.xx&gt;</td>
</tr>
<tr class="alt_row">
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx.xx&gt;</td>
<td>&lt;xx.xx&gt;</td>
</tr>
<tr>
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx.xx&gt;</td>
<td>&lt;xx.xx&gt;</td>
</tr>
<tr class="alt_row">
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx.xx&gt;</td>
<td>&lt;xx.xx&gt;</td>
</tr>
<tr>
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx/xx/xxxx&gt;</td>
<td>&lt;xx.xx&gt;</td>
<td>&lt;xx.xx&gt;</td>
</tr>
</table>
</div>

[Major Payne]

FF is not scrolling because there is no overflow. IE 7 has a small scroll because of some overflow, but the <tr> you want to keep fixed does scroll too.

Might try this:

<tr style="position:absolute; top: 0; left: 0;"> // adjust for positioning
<th>Date Due &nbsp;&nbsp; </th>
<th>Date Paid &nbsp;&nbsp; </th>
<th>Amount Due &nbsp;&nbsp; </th>
<th>Amount Paid</th>
</tr>

I added this so text color would contrast a bit:

<style type="text/css">
th { color: #006800; word-spacing: .45em; }
</style>

Ron