Hi - I'm looking for examples of CSS/Javascript usage which enables
the user to adjust the column widths of a table which is part of a
HTML page. What I'm after would be similar to the ability in Excel to
change the column widths to the users taste. Having mentioned Excel
though I should say that some limited form of the functionality would
do, so for instance if you could adjust the column width only  between
20% and 150% of the original width that would still be useful.
 
In looking at this myself I have created a three column table in which
the middle column is very thin and only contains a black background. I
can use CSS to give this thin column a 'arrow' cursor to indicate the
to the user that the width could be changed and I can hook code to the
mousedown, mousemove events etc but what that code should do to achive
the effect is beyond me - is it possible even ? The other, much more
minor, problem with my approach is that the thin column has breaks in
it at the row break.
 
Target browsers are IE5+;NS6+ and if it only worked on WIN32 versions 
that would be OK.
 
An ideal answer would be a small sample of HTML/CSS/JS. An acceptable
answer would be an example of a publically accessible website which
does what I want for the target browsers.
 
Thanks.

Hi,

I ran across your question while browsing around on GA, although I'm
not a researcher, perhaps I can help you out. I made some JavaScript
which seems to work, it's pasted at the bottom of this post. Sorry if
it's too big, don't really have any webspace to put it on now. Doesnt
work with netscape 6 yet, but that's something you can work on :)

The column breaks (at the row) that you were talking about can be
solved by using rowspan (as i've done in the example) or by setting
the cellspacing and padding to 0.

As far as I know it's not possible to adjust table sizes with
Javascript, so I've added an image (x.png - an empty pixel) to the
bottom of the table. It can be used perfectly to modify the sizes.
Well good luck with it :)

Ok here it goes:

---cut here---

<script language="JavaScript">
c=0; s=0; o=0;
if (document.layers) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=mousemove;
document.onmouseup=reset;
function reset() {
	c=0;
}
function mousemove(e) {
   	if (document.layers) { x=e.pageX;  } else {	x=event.x; }
	if(c != 0) img.width=o+(x-s);
}
function dragcol(colnum) {
	img=eval("document.images['colimg"+colnum+"']"); s=x; o=img.width;
c=colnum;
}
</script>
<table border="0">
<tr>
	<td><img src="x.png" name="colimg1" width="200" height="1" /><br
/></td>
	<td bgcolor='#000000' rowspan="2" onmousedown="dragcol(1)"
style="cursor:w-resize"><img src="x.png" width=3/><br /></td>
	<td><img src="x.png" name="colimg2" width="300" height="1"/><br
/></td>
	<td bgcolor='#000000' rowspan="2" onmousedown="dragcol(2)"
style="cursor:w-resize"><img src="x.png" width=3/><br /></td>
	<td><img src="x.png" name="colimg3" width="300" height="1"/><br
/></td>
</tr>
<tr>
	<td>Column 1</td>
	<td>Column 2</td>
	<td>Column 3</td>
</tr>
</table>

---cut here---

Hi acd-ga - Thanks very much ! Seems to work very well. Haven't had
time to check it out fully but what I have seen looks good. I'm sorry
you're not a researcher and so can't claim the bounty but I'm grateful
to you.

If anyone else wants to have a crack at supplying a solution which is
ready for NS6+ as well as IE then I'd still be interested.

Thanks again acd-ga.