>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 
