Help Me With this HTML Code

[baltazhor200401]

I have this HTML script, when you try to execute using IE there will be no problem, they look just fine, but when you execute it using FF there will be a mesh ... please tell me how to fix it and the code become browser friendly

<table width="80%" border="1" cellspacing="0" cellpadding="0">
<tr>
<th width="10%" class="padding1">No.</th>
<th width="30%" class="padding1">Kode Reseller</th>
<th width="30%" class="padding1">Nama Reseller </th>
<th width="10%" class="padding1">Status</th>
</tr>
</table>
<div style="width:100%; height:100px; overflow:auto; clear:left">
<table width="80%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="10%" class="padding1">1.</td>
<td width="30%" class="padding1">Code 1 </td>
<td width="30%" class="padding1">Name 1</td>
<td width="10%" align="center" class="padding1"><select name="select"></select></td>
</tr>
<tr>
<td width="10%" class="padding1">2.</td>
<td width="30%" class="padding1">Code 2</td>
<td width="30%" class="padding1">Name 2 </td>
<td width="10%" align="center" class="padding1"><select name="select"></select></td>
</tr>
<tr>
<td width="10%" class="padding1">3.</td>
<td width="30%" class="padding1">Code 3 </td>
<td width="30%" class="padding1">Name 3 </td>
<td width="10%" align="center" class="padding1"><select name="select"></select></td>
</tr>
<tr>
<td width="10%" class="padding1">4.</td>
<td width="30%" class="padding1">Code 4 </td>
<td width="30%" class="padding1">Name 4 </td>
<td width="10%" align="center" class="padding1"><select name="select"></select></td>
</tr>
<tr>
<td width="10%" class="padding1">5.</td>
<td width="30%" class="padding1">Code 5 </td>
<td width="30%" class="padding1">Name 5 </td>
<td width="10%" align="center" class="padding1"><select name="select"></select></td>
</tr>
<tr>
<td width="10%" class="padding1">6.</td>
<td width="30%" class="padding1">Code 6 </td>
<td width="30%" class="padding1">Name 6 </td>
<td width="10%" align="center" class="padding1"><select name="select"></select></td>
</tr>
</table>

[rpgfan3233]

</tr>
</table>
<div style="width:100%; height:100px; overflow:auto; clear:left">
<table width="80%" border="1" cellspacing="0" cellpadding="0">
<tr>
Why did you break the table into two tables with one being the table's headers?

[baltazhor200401]

because i want only the data that i can scroll down and the table's header stay still, i always did that and work fine using IE but not FF

[rpgfan3233]

The following code isn't complete, but it should illustrate what you can do:
<table style="width: 80%">
<tr>
<th>Column 1</th>
<!-- other header elements -->
</tr>
<!-- People always seem to like putting divs here or splitting tables to
make things work when there's a perfectly good and highly underused
element that just needs display:block applied to make it work like
a div... -->
<tbody style="height:100px; overflow:auto; display:block">
<tr>
<td>Item 1.1</td>
</tr>
<tr>
<td>Item 2.1</td>
</tr>
<tr>
<td>Item 3.1</td>
</tr>
<tr>
<td>Item 4.1</td>
</tr>
<tr>
<td>Item 5.1</td>
</tr>
<tr>
<td>Item 6.1</td>
</tr>
<tr>
<td>Item 7.1</td>
</tr>
<tr>
<td>Item 8.1</td>
</tr>
</tbody>
</table>

Does that do it?

Edit: Actually, I'm not sure Firefox does the scrollable bit correctly. Technically, a table should expand to fit the data, as Opera does, but instead it obeys the `height' and `overflow' on the TBODY element. If that display:block was replaced with width:100%, Opera would NOT display any scrolling. Opera has a reputation for being rather picky about rendering things in a standards-compliant way, which might explain its low user adoption compared to Firefox or other non-IE browsers on Windows. I don't have the time to consult the CSS 2.1 REC, but I have a bit of faith in Opera when it doesn't agree with Firefox. ^_^