scrolling table rows except top row...

[fdgsogc]

Challenge:
Use div tag with overflow:auto to create scroll bar for a table. However, need the first row (column headers) outside of the scrolling section.

Problem:
Initially, I had the div tag around the table

<div style="overflow:auto;height:300">
<table>
<tr><td>[b]Row with headings[/b]</td></tr>
<tr><td>2nd row</td></tr>
<tr><td>3rd row</td></tr>
etc...
<tr><td>20th row</td></tr>
</table>
</div>

This works as far as scrolling goes. However, it also scrolls the first row which contains my column headers.

I would like to use a div tag inside the table tag to keep the first row out. However, I get erratic results when I do this.

I do not want to put the column header row in a separate table outside of the div tag because then I have column width issues. The column header table and the data table column widths never line up without a lot of difficulty.

Ideas?

 

[RISTMO]

You're going to have to hardcode the widths. That's the only way to do it.

Rick

RISTMO Designs: Rockwall Web Design
Arab Church: Arabic Christian Resources
Genuine Autos: Kaufman Chevrolet & Pontiac Dealer
Rick Morgan's Official Website

 

[Vragabond]

http://www.imaputz.com/cssStuff/bigFourVersion.html

http://web.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html

Try these for reference.

 

[fdgsogc]

Thanks Vragabond. This is the link that really helped my out (

http://web.tampabay.rr.com/bmerkey/examples/swissarmy.exe).

In fact, I do need to put the header in its own table inside a div tag. But if I set the table style for my data table like so:

style="table-layout: fixed"

I forces the width of all columns to equal the width of the first row (my header row). Then all you have to do is hide the header row in the data column with this code:

<thead style="display: none">

Thanks again.