JS实现可拖拽宽度表格

将下面代码复制到body之后，可变宽度的表格id设为tbContent即可

var tbContent=document.getElementById("tbContent");
function fnInit()
...{
  for(var i=0;i<tbContent.rows.length;i++)
  ...{
   var _tr = tbContent.rows[i];
   for(var j=0;j<_tr.cells.length;j++)
   ...{
    var _td = _tr.cells(j);
    _td.noWrap = true;
    if(i==0)
    ...{    
     _tr.attachEvent("onmousedown", fnMousedown);
     _tr.attachEvent("onmousemove",fnMousemove);
     _tr.attachEvent("onmouseover",fnMouseover);
     _tr.attachEvent("onselectstart",fnCancel);
     window.document.attachEvent("onmouseup", fnMouseup);
     window.document.attachEvent("onmousemove",fnMouseMove);
    }
    else...{
     _td.style.borderRight = "1px solid #C0C0C0";
     _td.style.borderBottom = "1px solid #C0C0C0";
    }
   }
  
  
  }
  var _line = window.document.createElement("DIV");
  _line.style.position = "absolute";
  _line.style.backgroundColor="#000000";
  _line.style.width=1;
  window.document.body.appendChild(_line);
  tbContent.splitLine = _line;
  tbContent.splitLine.style.display = "none";
}

function fnMouseover()
...{
 return;
}

function fnMouseMove()...{
 if(!tbContent.splitlocked) return;
 fnMousemove();  
}

function fnMousemove()...{
 var oEl = event.srcElement;
 tbContent.splitLine.style.left = window.event.x;
 tbContent.splitLine.style.top = getTop(tbContent);
 tbContent.splitLine.style.height = tbContent.parentElement.clientHeight;
 if(tbContent.splitlocked) return;
 if(!IfSplitLocation(oEl)) return;
}

function fnClick()...{
 var oEl = event.srcElement;
}

function fnMousedown()...{
 var oEl = event.srcElement;
 if(!IfSplitLocation(oEl)) return;
 tbContent.splitLine.style.display = "";
 tbContent.splitlocked  = true;
 window.document.attachEvent("onselectstart",fnCancel);
}

function fnMouseup()
...{
 tbContent.splitLine.style.display = "none";
 tbContent.splitlocked  = false;
 tbContent.document.body.style.cursor='default';
 if(tbContent.curResizeTD == null) return;
 var otd = tbContent.curResizeTD;
 var otdLeft = getLeft(otd);
 var otdwidth =  tbContent.splitLine.style.pixelLeft - otdLeft
 if(otdwidth < 0) return;
 otd.style.width = otdwidth;
 window.document.detachEvent("onselectstart",fnCancel);
}

function IfSplitLocation(oEl)
...{
 if(oEl.tagName == "DIV")
  oEl = oEl.parentElement;
 if(oEl.tagName == "TD")
 ...{
  if(Math.abs(event.offsetX - oEl.clientWidth) <= 5)
  ...{
   tbContent.curResizeTD = oEl;
   tbContent.document.body.style.cursor='col-resize';
  }
  else if (Math.abs(event.offsetX) <= 5 && oEl.cellIndex>0)...{
   if(oEl.cellIndex>0)...{
    tbContent.curResizeTD = oEl.parentElement.cells(oEl.cellIndex-1);
    tbContent.document.body.style.cursor='col-resize';
   }
  }
  else...{
   tbContent.curResizeTD = null;
   tbContent.document.body.style.cursor='default';
   return false;
  }
 }
 return true;
}

function getTop(e)...{
 var t=e.offsetTop;
 while(e=e.offsetParent)...{
  t+=e.offsetTop;
  }
 return t;
}

function getLeft(e)...{
 var l=e.offsetLeft;
 while(e=e.offsetParent)...{
  l+=e.offsetLeft;
  }
 return l;
}

/**//*****************************************************
禁止拖动
*****************************************************/
function fnCancel()
...{
    window.event.returnValue = false;
 return false;
}
window.onload=fnInit; 

 本想把它加工成行高也可自动调整的，无奈水平有限。。。。