I dont know.
You said in another reply that your target browser is IE.
My code work ok in IE 6...
Yours, will work only if the row height is fixed in both tables.
You have to use "nowrap" in each "td"...
Good luck :-)
>This code causes error col2 undefined if I click right button.
>I solved this using two column frames and in second frame put
>the following code to sync scrolling
>
>
><body onscroll="
>window.parent.frame1.document.body.scrollTop=document.body.scrollTop;>
>
>
>Unfortunately, this does not work in Firebird.
>How to make it to work in Firebird browser?
>
>>>I have a html table with 250 columns and some hundres rows
>>>Since table is too wide, I want that the first column (Date) is always visible in screen when user scrolls horizontally table.
>>>Excel has similar functionality allowing to lock first column.
>>>Any idea how to implement this ?
>>
>>
>>Javascript and DHTML will do the trick!
>>
>>The magic is in the
>>
STYLE="table-layout:fixed"
>>assigned to the table and the "ID" and "display" style of the "COL" tag:
>>
<COL WIDTH=550 id="col2" style="display:none;">
>>
>>The script was created on the fly by me to show you the basic idea.
>>You should change it to use an array of columns ref in a loop instead of calling each of it explicitly.
>>
>>Cut and paste the following HTML in a new html doc to see this in action.
>>
>>
>><html>
>><head>
>><title>Scrolling table</title>
>><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
>></head>
>><body bgcolor="#FFFFFF" text="#000000">
>><h2>Scrolling table</h2>
>><p>
>><script>
>>var colvisible;
>>colvisible=1;
>>function moveleft(){
>>if (colvisible==2)
>> {
>> col1.style.display="";
>> col2.style.display="none";
>> colvisible=1
>> }
>>if (colvisible==3)
>> {
>> col2.style.display="";
>> col3.style.display="none";
>> colvisible=2
>> }
>>if (colvisible==4)
>> {
>> col3.style.display="";
>> col4.style.display="none";
>> colvisible=3
>> }
>>
>>}
>>function moveright(){
>>if (colvisible==3)
>> {
>> col4.style.display="";
>> col3.style.display="none";
>> colvisible=4
>> }
>>if (colvisible==2)
>> {
>> col3.style.display="";
>> col2.style.display="none";
>> colvisible=3
>> }
>>if (colvisible==1)
>> {
>> col2.style.display="";
>> col1.style.display="none";
>> colvisible=2
>> }
>>
>>}
>>
>>
>></script>
>>
>><table width=650><tr>
>><td align=left><input type=button value="left" onclick="moveleft()"></td>
>><td align=right><input type=button value="right" onclick="moveright()"></td>
>></tr></table>
>>
>><table STYLE="table-layout:fixed" border="1" width="650" cellspacing="0" cellpadding="2">
>>
>><COL WIDTH=100>
>><COL WIDTH=550 id="col1">
>><COL WIDTH=550 id="col2" style="display:none;">
>><COL WIDTH=550 id="col3" style="display:none;">
>><COL WIDTH=550 id="col4" style="display:none;">
>>
>> <tr>
>> <th>Fixed col</th>
>> <th>Col 1</th>
>> <th>Col 2</th>
>> <th>Col 3</th>
>> <th>Col 4</th>
>> </tr>
>> <tr>
>> <td>Fixed data</td>
>> <td>Column 1 data</td>
>> <td>Column 2 data</td>
>> <td>Column 3 data</td>
>> <td>Column 4 data</td>
>> </tr>
>> <tr>
>> <td>Fixed data</td>
>> <td>Column 1 data</td>
>> <td>Column 2 data</td>
>> <td>Column 3 data</td>
>> <td>Column 4 data</td>
>> </tr>
>> <tr>
>> <td>Fixed data</td>
>> <td>Column 1 data</td>
>> <td>Column 2 data</td>
>> <td>Column 3 data</td>
>> <td>Column 4 data</td>
>> </tr>
>> <tr>
>> <td>Fixed data</td>
>> <td>Column 1 data</td>
>> <td>Column 2 data</td>
>> <td>Column 3 data</td>
>> <td>Column 4 data</td>
>> </tr>
>> <tr>
>> <td>Fixed data</td>
>> <td>Column 1 data</td>
>> <td>Column 2 data</td>
>> <td>Column 3 data</td>
>> <td>Column 4 data</td>
>> </tr>
>></table>
>></body>
>></html>
>>
>>>>
>>HTH :-)
If we exchange an apple, we both get an apple.
But if we exchange an idea, we both get 2 ideas, cool...Gérald Santerre
Independant programmer - internet or intranet stuff - always looking for contracts big or small :)
http://www.siteintranet.qc.ca 
