scroll page without losing table header 2

secretsquirrel · Jan 15, 2002

hi guys,

i have a series of pages with tables of data in them. often there are enough rows of data to make the page scroll vertically (which means the header row disappears).

can anyone tell me what i need to do to make the body of the table scroll but not the header, without using frames.

i've seen this done before, but i can't find it anywhere.

if someone could point me in the direction of an example i'd be extremely grateful.

thanks in advance,

ss

NiteCrawlr · Jan 15, 2002

try using frames, top frame you put the header and in the lower frame you put the data.

NiteCrawlr · Jan 15, 2002

or maybe you could try using <Div>

secretsquirrel · Jan 15, 2002

thanks nitecrawlr, but the whole point is that i don't want to use frames - they causes all sorts of problems with column widths and column headings not lining up with column data.

how could i do it using a <div>?

starway · Jan 15, 2002

the are 2 options to do this:

1. using IFRAME (inline frame), it works in IE, N6, Opera but doesn't work in NN4.x

2. dynamic scrolling layer.
This is much more complicated and needs real energy to do it working in all browsers. I can recommend you to see this:

http://www.projectseven.com/tutorials/aniscroll/scroller.htm

Also look through this site, excellent examples for cross-browser dhtml are there!

good luck

secretsquirrel · Jan 17, 2002

i've found a solution now...

i have a <div> at the top of my page containing a <table> of column headers.

underneath this i have another <div> which contains a <table> of data. the data <div> uses the css property 'overflow-y: scroll;' which means the <div> scrolls vertically to allow you to see all the data.

to get round the problem of column widths not matching up, i've used the javascript property 'offsetWidth' to find the actual width of the data columns (as they appear on screen), and i've passed this value, via an onLoad event, to the column headers.

if you're interested in this i'd be happy to post some code.

thanks,

ss

AndyB21 · Jan 17, 2002

This sounds like just the sort of solution that I am looking for to solve a problem that I am having getting around frames usage. Some code would be great if you're offering!

Thanks,

Andy

secretsquirrel · Jan 17, 2002

here you go...

<html>
<head>
<title>non scrolling table header</title>
<script language="JavaScript">

</script>
</head>

<body bgcolor="#FFFFFF" text="#000000" onLoad="cellWidth();">
<div id="headLayer" style="position: absolute; top: 20px; left: 20px; width: 434px; height: 15px;">
<table width="100%" border="0" cellspacing="1" cellpadding="0" id="headTable">
<tr style="background-color: #999999; color: #FFFFFF">
<td width="100" nowrap>column 1</td>
<td width="100" nowrap>column 2</td>
<td width="100" nowrap>column 3</td>
<td width="100" nowrap>column 4</td>
</tr>
</table>
</div>
<div id="dataLayer" style="position: absolute; top: 37px; left: 20px; width: 450px; height: 200px; overflow-y: scroll;">
<table width="100%" border="0" cellspacing="1" cellpadding="0" id="scrollTable">
<TR bgcolor="#DDDDDD">
<td width="100">data 1</td>
<TD width="100">data 2</TD>
<TD width="100">data 3</TD>
<TD width="100">data 4</TD>
</TR>
<TR bgcolor="#DDDDDD">
<td width="100">data 1</td>
<TD width="100">data 2</TD>
<TD width="100">data 3</TD>
<TD width="100">data 4</TD>
</TR>
<TR bgcolor="#DDDDDD">
<td width="100">data 1</td>
<TD width="100">data 2</TD>
<TD width="100">data 3</TD>
<TD width="100">data 4</TD>
</TR>
<TR bgcolor="#DDDDDD">
<td width="100">data 1</td>
<TD width="100">data 2</TD>
<TD width="100">data 3</TD>
<TD width="100">data 4</TD>
</TR>
<TR bgcolor="#DDDDDD">
<td width="100">data 1</td>
<TD width="100">data 2</TD>
<TD width="100">data 3</TD>
<TD width="100">data 4</TD>
</TR>
<TR bgcolor="#DDDDDD">
<td width="100">data 1</td>
<TD width="100">data 2</TD>
<TD width="100">data 3</TD>
<TD width="100">data 4</TD>
</TR>
<TR bgcolor="#DDDDDD">
<td width="100">data 1</td>
<TD width="100">data 2</TD>
<TD width="100">data 3</TD>
<TD width="100">data 4</TD>
</TR>
<TR bgcolor="#DDDDDD">
<td width="100">data 1</td>
<TD width="100">data 2</TD>
<TD width="100">data 3</TD>
<TD width="100">data 4</TD>
</TR>
<TR bgcolor="#DDDDDD">
<td width="100">data 1</td>
<TD width="100">data 2</TD>
<TD width="100">data 3</TD>
<TD width="100">data 4</TD>
</TR>
<TR bgcolor="#DDDDDD">
<td width="100">data 1</td>
<TD width="100">data 2</TD>
<TD width="100">data 3</TD>
<TD width="100">data 4</TD>
</TR>
<TR bgcolor="#DDDDDD">
<td width="100">data 1</td>
<TD width="100">data 2</TD>
<TD width="100">data 3</TD>
<TD width="100">data 4</TD>
</TR>
<TR bgcolor="#DDDDDD">
<td width="100">data 1</td>
<TD width="100">data 2</TD>
<TD width="100">data 3</TD>
<TD width="100">data 4</TD>
</TR>
<TR bgcolor="#DDDDDD">
<td width="100">data 1</td>
<TD width="100">data 2</TD>
<TD width="100">data 3</TD>
<TD width="100">data 4</TD>
</TR>
<TR bgcolor="#DDDDDD">
<td width="100">data 1</td>
<TD width="100">data 2</TD>
<TD width="100">data 3</TD>
<TD width="100">data 4</TD>
</TR>
<TR bgcolor="#DDDDDD">
<td width="100">data 1</td>
<TD width="100">data 2</TD>
<TD width="100">data 3</TD>
<TD width="100">data 4</TD>
</TR>
</table>
</div>
</body>
</html>

you'll notice that the columns and headers line up correctly, and if you make the contents of any of the data cells too wide for the header, the header will resize automatically.

finny · Sep 18, 2002

SecretSquirrel,
The code you listed in thread:
thread215-192903
looked like it was going to help me out tremendously, but I have a question for you, if you don't mind. I tried to use it, but the column headers would not line up correctly. The scrolling worked great, but the javascript "cellWidth()" didn't pick up the width of the cells. When I but an alert(dataWidth) in the script, it always comes back as "undefined". It happen like that in my code and in the code you pasted above. Also, when I changed the data in one of the cells, the column headers didn't change. I am posted my code below and would appreciate any help/ideas you might have. Thx in advance....Finny

<script language="javascript">

</script>

<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
<TITLE>Procurement Forecast</TITLE>
<BODY BGCOLOR="white" onload="cellWidth()">
<form id="frmProcurement" name="frmProcurement" action="/gdps/ProcWork.asp" method="post">
<HTML>
<BODY>

<div id="headLayer" style="position: absolute; top: 315 px; left: 10 px; width: 100%; height: 10 px;">
<table align="left" width="99%" border="1" cellspacing="0" cellpadding="0" id="headTable">
<tr bgcolor="#eeeecc">
<td size =1 align="center">Remove</td>
<td size =1 align="center">Spass #</td>
<td size =1 align="center">Description</td>
<td size =1 align="center">UOM</td>
<td size =1 align="center">Jan</td>
<td size =1 align="center">Feb</td>
<td size =1 align="center">Mar</td>
<td size =1 align="center">Apr</td>
<td size =1 align="center">May</td>
<td size =1 align="center">Jun</td>
<td size =1 align="center">Jul</td>
<td size =1 align="center">Aug</td>
<td size =1 align="center">Sep</td>
<td size =1 align="center">Oct</td>
<td size =1 align="center">Nov</td>
<td size =1 align="center">Dec</td>
<td size =1 align="center">2002 Forecasting Balance</td>
<td size =1 align="center">2003 Total</td>
</tr>
</table>
</div>

<div id = "dataLayer" style ="position: absolute; top: 375 px; left: 10px; width: 100%; height: 200 px; overflow-y: scroll;">
<table width = "99%" border ="0" cellspacing = "0" cellpadding = "0" id="scrollTable">

<tr BGColor=#ffffcc>
<td align = "center"><input type="checkbox" id="59010493chk" name="59010493chk" onclick="funRemove(this.name)"></td>
<td size =4 align="left"> 59010493</td>
<td size =4 align="left"> 268 TECHNICAL,BULK,US</td>
<td size =4 align="left"> LB</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="center"><input name="59010493MO9" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)"></td>
<td size =4 align="center"><input name="59010493MO10" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="center"><input name="59010493MO11" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="center"><input name="59010493MO12" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
</tr>

<tr BGColor=#eeeecc>
<td align = "center"><input type="checkbox" id="59015002chk" name="59015002chk" onclick="funRemove(this.name)"></td>
<td size =4 align="left"> 59015002</td>
<td size =4 align="left"> ABATE* TECHNICAL,1X551 LB,US</td>
<td size =4 align="left"> LB</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 11,000</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 37,478</td>
<td size =4 align="center"><input name="59015002MO9" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)"></td>
<td size =4 align="center"><input name="59015002MO10" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="center"><input name="59015002MO11" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="center"><input name="59015002MO12" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 26,455</td>
</tr>

<tr BGColor=#ffffcc>
<td align = "center"><input type="checkbox" id="58820493chk" name="58820493chk" onclick="funRemove(this.name)"></td>
<td size =4 align="left"> 58820493</td>
<td size =4 align="left"> BASAMID GRANULAR,1X50 LB, US</td>
<td size =4 align="left"> LB</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 156,000</td>
<td size =4 align="left"> 156,000</td>
<td size =4 align="left"> 148,000</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 30,000</td>
<td size =4 align="center"><input name="58820493MO9" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)"></td>
<td size =4 align="center"><input name="58820493MO10" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="center"><input name="58820493MO11" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="center"><input name="58820493MO12" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 702,000</td>
</tr>

<tr BGColor=#eeeecc>
<td align = "center"><input type="checkbox" id="58899154chk" name="58899154chk" onclick="funRemove(this.name)"></td>
<td size =4 align="left"> 58899154</td>
<td size =4 align="left"> BENTAZON NA TECHN.,BULK</td>
<td size =4 align="left"> KG</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 63,000</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 236,000</td>
<td size =4 align="left"> 235,000</td>
<td size =4 align="center"><input name="58899154MO9" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)"></td>
<td size =4 align="center"><input name="58899154MO10" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="center"><input name="58899154MO11" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="center"><input name="58899154MO12" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 1,050,000</td>
</tr>

<tr BGColor=#ffffcc>
<td align = "center"><input type="checkbox" id="58820776chk" name="58820776chk" onclick="funRemove(this.name)"></td>
<td size =4 align="left"> 58820776</td>
<td size =4 align="left"> CYGNUS,1X20 KG,US</td>
<td size =4 align="left"> KG</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="center"><input name="58820776MO9" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)"></td>
<td size =4 align="center"><input name="58820776MO10" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="center"><input name="58820776MO11" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="center"><input name="58820776MO12" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
</tr>

<tr BGColor=#eeeecc>
<td align = "center"><input type="checkbox" id="55891095chk" name="55891095chk" onclick="funRemove(this.name)"></td>
<td size =4 align="left"> 55891095</td>
<td size =4 align="left"> DIMETHOMORPH TEC 70KG</td>
<td size =4 align="left"> KG</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="center"><input name="55891095MO9" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)"></td>
<td size =4 align="center"><input name="55891095MO10" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="center"><input name="55891095MO11" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="center"><input name="55891095MO12" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
</tr>

<tr BGColor=#ffffcc>
<td align = "center"><input type="checkbox" id="58260084chk" name="58260084chk" onclick="funRemove(this.name)"></td>
<td size =4 align="left"> 58260084</td>
<td size =4 align="left"> Pyraclostrobin techn. (,1X240 KG,UNSPEZ.</td>
<td size =4 align="left"> KG</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="center"><input name="58260084MO9" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)"></td>
<td size =4 align="center"><input name="58260084MO10" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="center"><input name="58260084MO11" size="7" value="25000" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="center"><input name="58260084MO12" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="left"> 25,000</td>
<td size =4 align="left"> 345,000</td>
</tr>

<tr BGColor=#eeeecc>
<td align = "center"><input type="checkbox" id="58138703chk" name="58138703chk" onclick="funRemove(this.name)"></td>
<td size =4 align="left"> 58138703</td>
<td size =4 align="left"> PYRAMIN DF,1X1000 KG,US</td>
<td size =4 align="left"> KG</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 50,000</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 94,000</td>
<td size =4 align="left"> 93,500</td>
<td size =4 align="left"> 0</td>
<td size =4 align="center"><input name="58138703MO9" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)"></td>
<td size =4 align="center"><input name="58138703MO10" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="center"><input name="58138703MO11" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="center"><input name="58138703MO12" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 20,000</td>
</tr>

<tr BGColor=#ffffcc>
<td align = "center"><input type="checkbox" id="58820615chk" name="58820615chk" onclick="funRemove(this.name)"></td>
<td size =4 align="left"> 58820615</td>
<td size =4 align="left"> QUINCLORAC TECHN.,1X140 KG,US</td>
<td size =4 align="left"> KG</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 100,000</td>
<td size =4 align="left"> 170,000</td>
<td size =4 align="left"> 149,800</td>
<td size =4 align="center"><input name="58820615MO9" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)"></td>
<td size =4 align="center"><input name="58820615MO10" size="7" value="149800" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="center"><input name="58820615MO11" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="center"><input name="58820615MO12" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="left"> 149,800</td>
<td size =4 align="left"> 133,000</td>
</tr>

<tr BGColor=#eeeecc>
<td align = "center"><input type="checkbox" id="58820745chk" name="58820745chk" onclick="funRemove(this.name)"></td>
<td size =4 align="left"> 58820745</td>
<td size =4 align="left"> SOVRAN,1X20 KG,US</td>
<td size =4 align="left"> KG</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 30,500</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="center"><input name="58820745MO9" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)"></td>
<td size =4 align="center"><input name="58820745MO10" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="center"><input name="58820745MO11" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="center"><input name="58820745MO12" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 7,000</td>
</tr>

<tr BGColor=#ffffcc>
<td align = "center"><input type="checkbox" id="58193245chk" name="58193245chk" onclick="funRemove(this.name)"></td>
<td size =4 align="left"> 58193245</td>
<td size =4 align="left"> Stomp 455CS (RLM1109),BULK</td>
<td size =4 align="left"> L</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 114,000</td>
<td size =4 align="center"><input name="58193245MO9" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)"></td>
<td size =4 align="center"><input name="58193245MO10" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="center"><input name="58193245MO11" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="center"><input name="58193245MO12" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 2,802,000</td>
</tr>

<tr BGColor=#eeeecc>
<td align = "center"><input type="checkbox" id="59010367chk" name="59010367chk" onclick="funRemove(this.name)"></td>
<td size =4 align="left"> 59010367</td>
<td size =4 align="left"> TRIFORINE,1X110 LB,US</td>
<td size =4 align="left"> LB</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="center"><input name="59010367MO9" size="7" value="30000" onfocus="this.select()" onchange="LogChange(this.name)"></td>
<td size =4 align="center"><input name="59010367MO10" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="center"><input name="59010367MO11" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="center"><input name="59010367MO12" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="left"> 30,000</td>
<td size =4 align="left"> 35,000</td>
</tr>

<tr BGColor=#ffffcc>
<td align = "center"><input type="checkbox" id="58145718chk" name="58145718chk" onclick="funRemove(this.name)"></td>
<td size =4 align="left"> 58145718</td>
<td size =4 align="left"> VINCLOZOLIN TECHN. MUP BER. ,1X500 KG,US</td>
<td size =4 align="left"> KG</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 95,000</td>
<td size =4 align="left"> 50,000</td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 40,000</td>
<td size =4 align="left"> 40,000</td>
<td size =4 align="center"><input name="58145718MO9" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)"></td>
<td size =4 align="center"><input name="58145718MO10" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="center"><input name="58145718MO11" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="center"><input name="58145718MO12" size="7" value="0" onfocus="this.select()" onchange="LogChange(this.name)" onBlur="chVal(this.value, name)"></td>
<td size =4 align="left"> 0</td>
<td size =4 align="left"> 215,000</td>
</tr>
</table>
</div>
</HTML>
</BODY>

secretsquirrel · Sep 18, 2002

my apologies! the above javascript doesn't actually do what it was supposed to!

this is going back eight months, so i'll have to try and remember what i did in the end.

as far as i can remember, we had weeks of trouble with this problem and we eventually fixed it by setting the column widths to specific values and truncating data which wouldn't fit using some clever bit of java written by a colleague of mine.

basically the java calculated the width in pixels of the data before it built the page, based on the metrics of whichever font we were using. if the width of the data was greater than the width of the cell, the last characters would be replaced with '...' and a tooltip inserted...

so if the following data was too long...

<td>data data data data</td>

...it would be replaced with...

<td title="data data data data">data...</td>

...i know this doesn't fix your problem, but at least you know not that it's my mistake and not yours! sorry!

if i come across a way to fix this, i'll be sure to let you know.

ss...

finny · Oct 1, 2002

SS...

I was away for a couple of weeks, so I just got this. Thx for the reply and update on the situation. I was thinking of doing something similar to determine the longest value for each column in ASP and passing it back that way as opposed to using the javascript. Do you know of any advantages to using one over the other?

Thx...finny

secretsquirrel · Oct 2, 2002

sorry, i know practically nothing about asp, so i couldn't really say.

ss...

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

scroll page without losing table header 2

secretsquirrel

Programmer

NiteCrawlr

Programmer

NiteCrawlr

Programmer

secretsquirrel

Programmer

starway

Programmer

secretsquirrel

Programmer

AndyB21

Programmer

secretsquirrel

Programmer

finny

Programmer

secretsquirrel

Programmer

finny

Programmer

secretsquirrel

Programmer

Similar threads

Part and Inventory Search

Sponsor