Client-side Resizable Columns in IE6 18 May 2007 at 00:00
This example shows you how to create resizable columns on a web page. This is for Internet Explorer 6 and above only, and shouldn't be used for tables with too many rows.

<html>
<head>
<script language="javascript">
var divResize = null;
var mouseX = -1;
var mouseY = -1;

function endColumnResize() 
{
	if (divResize != null)
	{
		
		// get a handle on all the objects in the header
		var cell = divResize.parentNode.parentNode;
		var divParent = divResize.parentNode;
		var divText = divResize.parentNode.childNodes[0];
		var row = cell.parentNode;
		var columnIndex = -1;
		
		// work out the locations and sizes
		var cellX = getLeftPos(cell);
		var colWidth = document.body.scrollLeft + mouseX - cellX;
		if (colWidth < 20) colWidth = 20;
		
		// reset everything in the header
		cell.style.width = colWidth + 'px';
		divParent.style.width = colWidth + 'px';
		divText.style.width = (colWidth - 5) + 'px';
		document.body.style.cursor = 'default';
		divResize = null;
		
		// now we need to work out the cell index that has changed
		for (var i=0; i<row.childNodes.length; i++) 
		{
			if (row.childNodes[i] == cell)
			{
				columnIndex = i;
				break;
			}
		}
		
		// now go through every row, and adjust the column that has changed
		var tableBody = row.parentNode;
		for (var i=0; i<tableBody.childNodes.length; i++) 
		{
			row = tableBody.childNodes[i];
			var span = row.childNodes[columnIndex].childNodes[0];
			span.style.width = cell.style.width;
		}
	}
}

function getLeftPos(obj) {
	var left = 0;
	if (obj.offsetParent) {
		while (obj.offsetParent) {
			left += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	return left;
}

function onMouseMove() 
{
	mouseX = event.clientX;
	mouseY = event.clientY;
}

function onMouseOut() 
{
	if (mouseX == 0 || mouseX == document.body.clientWidth || mouseY == 0 || mouseY == document.body.clientHeight)
	{
		endColumnResize();
	}
}

function onMouseUp() 
{
	endColumnResize();
}

function onSelectStart() {
	return (divResize == null);
}

function startColumnResize(objResize) 
{
	divResize = objResize;
	document.body.style.cursor = 'e-resize';
}

document.attachEvent("onmousemove", onMouseMove);
document.attachEvent("onmouseout", onMouseOut);
document.attachEvent("onmouseup", onMouseUp);
document.attachEvent("onselectstart", onSelectStart);
</script>
</head>
<body bgcolor="#E0E0E0">
<table cellpadding="0" cellspacing="0" border="1">
	<tr>
		<td style="width:100px;white-space:nowrap;">
			<div style="width:100px;white-space:nowrap;">
				<div style="float:left;width:95px;text-overflow:ellipsis;overflow:hidden;">A</div>
				<div style="width:5px;background-color:#C0C0C0;float:left;cursor:e-resize;" onmousedown="startColumnResize(this)"></div>
			</div>
		</td>
		<td style="width:150px;white-space:nowrap;">
			<div style="width:150px;white-space:nowrap;">
				<div style="float:left;width:145px;text-overflow:ellipsis;overflow:hidden;" title="BBBBB">BBBBB</div>
				<div style="width:5px;background-color:#C0C0C0;float:left;cursor:e-resize;" onmousedown="startColumnResize(this)"></div>
			</div>
		</td>
		<td style="width:200px;white-space:nowrap;">
			<div style="width:200px;white-space:nowrap;">
				<div style="float:left;width:195px;text-overflow:ellipsis;overflow:hidden;">C</div>
				<div style="width:5px;background-color:#C0C0C0;float:left;cursor:e-resize;" onmousedown="startColumnResize(this)"></div>
			</div>
		</td>
	</tr>
	<tr>
		<td><span style="white-space:nowrap;width:100px;text-overflow:ellipsis;overflow:hidden;">Text for column A row 1</span></td>
		<td><span style="white-space:nowrap;width:150px;text-overflow:ellipsis;overflow:hidden;">Text for column B row 1</span></td>
		<td><span style="white-space:nowrap;width:200px;text-overflow:ellipsis;overflow:hidden;">Text for column C row 1</span></td>
	</tr>
	<tr>
		<td><span style="white-space:nowrap;width:100px;text-overflow:ellipsis;overflow:hidden;">Text for column A row 2</span></td>
		<td><span style="white-space:nowrap;width:150px;text-overflow:ellipsis;overflow:hidden;">Text for column B row 2</span></td>
		<td><span style="white-space:nowrap;width:200px;text-overflow:ellipsis;overflow:hidden;">Text for column C row 2</span></td>
	</tr>
</table>
</div>
</body>
</html>