Table 可以拖动效果

css：

.resizeDivClass{width:1px;margin:0px 0 0px 0;filter:alpha(opacity=0); background-color:Red;  float:right;cursor:e-resize;}

JS：

function MouseDownToResize(obj){
setTableLayoutToFixed();
obj.mouseDownX=event.clientX;
obj.pareneTdW=obj.parentElement.offsetWidth;
obj.pareneTableW=theObjTable.offsetWidth;
obj.setCapture();
}
function MouseMoveToResize(obj){
    if(!obj.mouseDownX) return false;
    var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;
    if(newWidth>10)
    {
 var theObjTable = document.getElementById("theObjTable");
 obj.parentElement.style.width = newWidth;
 theObjTable.style.width=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;
 }
}
function MouseUpToResize(obj){
obj.releaseCapture();
obj.mouseDownX=0;
}
function setTableLayoutToFixed()
{
 var theObjTable = document.getElementById("theObjTable");
 if(theObjTable.style.tableLayout=='fixed') return;
   var headerTr=theObjTable.rows[0];
    for(var i=0;i<headerTr.cells.length;i++)
    {
    headerTr.cells[i].styleOffsetWidth=headerTr.cells[i].offsetWidth;
    }
    
    for(var i=0;i<headerTr.cells.length;i++)
    {
    headerTr.cells[i].style.width=headerTr.cells[i].styleOffsetWidth;
    }
    theObjTable.style.tableLayout='fixed';
}

页面代码：

    <table id="theObjTable" width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#a8c7ce" onMouseOver="changeto()"  onmouseout="changeback()">
                                    <tr>
                                    <td width="4%" height="20" bgcolor="d3eaef" class="style10"><span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span><div align="center"><input type="checkbox" name="ck_all" id="ck_all" /></div></td>
                                    <td width="6%" height="20" bgcolor="d3eaef" class="style6"><span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span><div align="center"><span class="style10">序号</span></div></td>
                                    <td width="32%" height="20" bgcolor="d3eaef" class="style6"><span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span><div align="center"><span class="style10">标题</span></div></td>
                                    <td width="8%" height="20" bgcolor="d3eaef" class="style6"><span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span><div align="center"><span class="style10">作者</span></div></td>
                                    <td width="8%" height="20" bgcolor="d3eaef" class="style6"><span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span><div align="center"><span class="style10">点击次数</span></div></td>
                                    <td width="10%" height="20" bgcolor="d3eaef" class="style6"><span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span><div align="center"><span class="style10">更新日期</span></div></td>
                                    <td width="14%" height="20" bgcolor="d3eaef" class="style6"><span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span><div align="center"><span class="style10">排序编号</span></div></td>
                                    <td width="10%" height="20" bgcolor="d3eaef" class="style6"><span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span><div align="center"><span class="style10">基本操作</span></div></td>
                                    </tr>

效果：

拖动前表格样子

 

拖动后表格样子