Ho provato a fare questo x IE soltanto....

E' un buon inizio, ma c'è ancora da fare. Ovviamente non ho guardato come fanno ma secondo me hanno un approccio diverso.

codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
.tab {background-color:white;font-family:verdana;font-size:8pt;text-overflow:ellipsis;text-decoration:none}
.c1  {background-color:#e8e8e8;border-bottom-style:solid;border-bottom-width:2px;border-bottom-color:#c8c8c8;text-align:left}
.c2  {background-color:#f0f0f0;border-bottom-style:solid;border-bottom-width:2px;border-bottom-color:#e6e600;text-align:left}
.separator {cursor:W-resize;background-image:url('separator.gif');background-repeat:no-repeat;);

-->
</style>

<script language="JavaScript" type="text/javascript">
<!--

var formerScreenX = 0;
function mouseDir() {
 curScreenX    = event.screenX;
 direction     = curScreenX < formerScreenX ? 'left':'right';
 formerScreenX = curScreenX;
 return direction;
}

//------------- Cambia la classe dell'oggetto th
function changeClass(aTr,aClassName) {
 aTr.className = aClassName;
}

var toggleChangeWidth = false;
var thisCol;
var prevCol;
var formerPos;
var sourceElt;
//------------ Inizio resize
function startResizeColumn(anObject) {
 toggleChangeWidth = true;
 formerScreenX     = event.screenX;
 sourceElt         = anObject;
 thisCol           = anObject.id.replace('t','');
 prevCol           = thisCol - 1;
 document.getElementById('t'+prevCol).className = 'c2'; 
} // function startResizeColumn(anObject)

//------------ Azione resize
function doResize(aTable) {
 if (toggleChangeWidth) {
  event.cancellBubble = true;
  posLeft   = document.getElementById('t'+prevCol).offsetLeft;
	if (mouseDir() == 'right') {
	  status = 'right';
		mult   = -1;
	  document.body.style.cursor = 'W-resize';
	} else {
	  status = 'left';
    mult   = +1;		
	  document.body.style.cursor = 'W-resize';
	} // if (event.x > formerPos)		
  posX    = event.x - (sourceElt.offsetWidth * 2);	
	newPos  = posX - (posLeft) > 0 ? posX - (posLeft) : 1; 
  document.getElementById('t'+prevCol).width = newPos;	
  event.cancellBubble = false;	
 } // if (toggleChangeWidth)
} // function doResize(aTable)

//------------ Fine resize
function endResizeColumn(aTable) {
 toggleChangeWidth = false;
 status = '****************************************************';
 document.body.style.cursor = '';
 document.getElementById('t'+prevCol).className = 'c1';  
} // function endResizeColumn(aTable)
//-->
</script>

</head>
<body >

<table summary="" cellpadding="0" cellspacing="0" class="tab" 
  onmouseup  ="endResizeColumn(this)" 
	onmousemove="doResize(this)">
<th id="t0" class="c1" width="200" onmouseover="changeClass(this,'c2')" onmouseout="changeClass(this,'c1')">Name</th>
<th id="t1" class="separator"      onmousedown="startResizeColumn(this)" width="5px"></th>
<th id="t2" class="c1" width="50"  onmouseover="changeClass(this,'c2')" onmouseout="changeClass(this,'c1')">Size</th>
<th id="t3" class="separator"      onmousedown="startResizeColumn(this)" width="5px"></th>

<tr>
<td>shabadabadaze</td>
<td></td>
<td>1.200</td>
<td></td>
</tr>

<tr>
<td>pippo</td>
<td></td>
<td>1.100</td>
<td></td>
</tr>

</table>
</body>
</html>