Holding column heads while page scrolls

[MackOfTrades]

I am currently creating a web page in HTML and VBScript. On one page, the user selects a number of criteria. Based on these criteria, a second page is generated that includes certain rows and columns (including column heads).

My question is the following. Is there a way to keep the column heads (i.e. the first 'row') at the top of the screen while scrolling through the rest of the quite large table? This table is created entirely through HTML and VBScript (thus it is not an imported object).

I greatly appreciate any responses.

 

[TheConeHead]

checkout

http://www.dynamicdrive.com

and check out coolmenus3.js.... it has a way to have a layer stay at a certain point and them stay at the top of the window as you scroll down

 

[ChrisHunt]

Try doing a Keyword Search for "table scroll" on this forum for the last 6 months - you'll find a few threads that cover this subject.

-- Chris Hunt
Extra Connections Ltd

http://www.extracon.com

The real world's OK for a visit, but you wouldn't want to LIVE there!

 

[MackOfTrades]

Well, I've made some headway. I have the scroll feature worked in, through the use of a <div...>. My new problem should be far easier to fix, but I'm stumped none the less.

How do you fix the width of an entire table based on the first row? I have my fixed column heads at the top of the page. That table then ends. I run the div line, and then the new table (that can scroll). Within that table, I would like to keep all the column widths based on the first row of this table. Unfortunately, because of the text in the rest of table, the columns are being resized.

Again, any help is appreciated.

 

[TheConeHead]

if you know what the sizes are just hard code in the sizes:
<table width=&quot;800&quot;.....>
<tr>
<td width=&quot;150&quot;...

is that what you mean?

or do the sizes need to change based on the content?

 

[MackOfTrades]

Unfortunately, the sizes must be able change on some of the columns and not on the others. Thus for the columns that have a fixed width I have hard coded in the values. It is with the variable width columns that I have problems. Regardless of what I do or set the values to initially, it seems that the text within the column always affects the width.

 

[TheConeHead]

hmmm... see... well surely you could add a new field to your db that gives a height for each column based on the content... not sure you want to go to that trouble though... is there a way the page knows what content is coming?? if so you could set the height that way... like if you pass it the variable type=1

switch(type) {
case(1):
col1=&quot;150&quot;;
col2=&quot;350&quot;;
break;
case(2)
col1=&quot;215&quot;;
col2=&quot;175&quot;;
break;
}

something like that?

 

[ChrisHunt]

This is probably a stupid question, but do you need to split the table into two? You're using a <div> with some CSS properties something like this:
[tt]
<div style=&quot;header CSS in here&quot;>
<table>
<tr>
<th>heading 1</th>
<th>heading 2</th>
</tr>
</table>
</div>
<div style=&quot;body CSS in here&quot;>
<table>
<tr>
<td>data 1a</td>
<td>data 2a</td>
</tr>
<tr>
<td>data 1b</td>
<td>data 2b</td>
</tr>
</table>
</div>
[/tt]
Could you not apply the same CSS to <thead> and <tbody> elements instead:
[tt]
<table>
<thead style=&quot;header CSS in here&quot;>
<tr>
<th>heading 1</th>
<th>heading 2</th>
</tr>
</thead>
<tbody style=&quot;body CSS in here&quot;>
<tr>
<td>data 1a</td>
<td>data 2a</td>
</tr>
<tr>
<td>data 1b</td>
<td>data 2b</td>
</tr>
</tbody>
</table>
[/tt]


-- Chris Hunt
Extra Connections Ltd

http://www.extracon.com

The real world's OK for a visit, but you wouldn't want to LIVE there!

 

[stein555]

If you know how wide you want the table to be (total width), you can calculate the widths of the other columns by dividing the total width by the number of columns. I will give you an example of what I would do if I were reading the data in from a database...

<table width=800>
<tr>
<%for i = 0 to rsDB.Fields.Count - 1%>
<td width=<%response.write(800 / rsDB.Fields.Count)%>>
...
...
...
</td>
<%next%>
</tr>
</table>

I haven't tested this code, but I think that it will work (or something similar to that same logic). But, I don't know if you are using a database of any kind...

P.S. rsDB is a Recordset of the Database.