利用JS实现可以自由拖拽调整宽度的表格

// JScript 文件
function fnInit()
{
  for(var i=0;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.οnlοad=fnInit;