可拖拽列头Table

<table width="333" border="1" id="ttt">
  <tr>
    <td >1</td>
    <td >2</td>
    <td >3</td>
    <td>4</td>
  </tr>
  <tr>
    <td> g</td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

<script>
function fnInit()
{
    for(var i=0;i<ttt.rows.length;i++)
    {
            var _tr = ttt.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);
    ttt.splitLine = _line;
    ttt.splitLine.style.display = "none";
}
function fnMouseover()
{
    return;
}
function fnMouseMove()
{
    if(!ttt.splitlocked) return;
    fnMousemove();               
}
function fnMousemove()
{
    var oEl = event.srcElement;
    ttt.splitLine.style.left = window.event.x;
    ttt.splitLine.style.top = getTop(ttt);
    ttt.splitLine.style.height = ttt.parentElement.clientHeight;
    if(ttt.splitlocked) return;
    if(!IfSplitLocation(oEl)) return;
}
function fnClick()
{
    var oEl = event.srcElement;
}
function fnMousedown()
{
    var oEl = event.srcElement;
    if(!IfSplitLocation(oEl)) return;
    ttt.splitLine.style.display = "";
    ttt.splitlocked  = true;
    window.document.attachEvent("onselectstart",fnCancel);
}
function fnMouseup()
{
    ttt.splitLine.style.display = "none";
    ttt.splitlocked  = false;
    ttt.document.body.style.cursor='default';
    if(ttt.curResizeTD == null) return;
    var otd = ttt.curResizeTD;
    var otdLeft = getLeft(otd);
    var otdwidth =  ttt.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)
            {
                    ttt.curResizeTD = oEl;
                    ttt.document.body.style.cursor='col-resize';
            }
            else if (Math.abs(event.offsetX) <= 5 && oEl.cellIndex>0){
                    if(oEl.cellIndex>0){
                            ttt.curResizeTD = oEl.parentElement.cells(oEl.cellIndex-1);
                            ttt.document.body.style.cursor='col-resize';
                    }
            }
            else{
                    ttt.curResizeTD = null;
                    ttt.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;
</script>