scrollbartable script -- need more than one row in header

[ouigkmy]

Hi There! New poster here. I have searched the forums for an answer to my question, but I haven't found anything. Forgive me if the question has an obvious answer or is in general too noobish.

I am using a jQuery javascript app to make a regular table into a table that has a scrollbar on the right side and can be scrolled.

The script I mean is here:

http://derek.app02.i-sites.com/scrollbarTable-0.1/scrollbarTable-0.1.js

The purpose is that users can scroll the contents of the table and still see the headers, so that they don't have to remember which column is what.

To do this, the scrollbartable app extracts the first header of the table and puts it aside:

/* Remove the header and put it before the rest of the table as a new table*/
var $firstRow = $t.clone();					
$firstRow.find('tr:not(:first)').remove();
$t.find('tr:first').remove();     
$t.before($firstRow);

However, the table I am using has two tr's in the header:

<table class="rspace scrollbarTableLarge">
		<thead>
			<tr>
				<th rowspan="2">1</th>
				<th rowspan="2">2</th>
				<th rowspan="2">3</th>
				<th rowspan="2">4</th>
				<th colspan="{$project->getPlannedAnalyses()|@count}">Analyses</th>
				<th rowspan="2">6</th>
                         </tr>
			 <tr>
				{foreach from=$project->getPlannedAnalyses() item=analyse}
					<th>{$analyse->naam}</th>
				{/foreach}
			</tr>
		</thead>
		
		<tbody>
                 .....
                </tbody>

So as you see the fifth column has a name "Analyses", and it is subdivided into an arbitrary amount of other colums (as many as there are analyses).

The Scrollbartable app only puts the first <tr> in the header. All the names of the analyses of teh second <tr> are put in the table itself and scroll away when the table is scrolled.

How can I modify the javascript in a simple way so that it also takes the second <tr> and puts in in a non-scrollable header?

Thanks in advance for your answers!

 

[NoCoolHandle]

I think i did something like this in the past and may have done it via ceating the heading in one div and then had the row data in another grid with a defined size and scrollbars on the div.
The is ensureing that the columns in the upper div are the same width as the lower one.. (I do have the feeling taht i found another soultion also, but can't rememver what it was)

e.g. (something like)

<div id='headingRow'><table><tr><th width='20'></th></tr></table></div>
<div id='datagrid' style='height:60px;overflow:auto;width:400px'>
<table>
<tr><td width='20'>1</td></tr>
<tr><td width='20'>2</td></tr>
<tr><td width='20'>3</td></tr>
<tr><td width='20'>4</td></tr>
<tr><td width='20'>5</td></tr>
<tr><td width='20'>6</td></tr>
<tr><td width='20'>7</td></tr>
</table></div>