怎么样拖动改变Table的列宽度?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style>
.resizeDivClass { position:relative; background-color:red; width:2; z-index:1; left:expression(this.parentElement.offsetWidth-1); cursor:e-resize;}
</style><script language=javascript>
function MouseDownToResize(obj){
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>0) { obj.parentElement.style.width = newWidth; theObjTable.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX; } } function MouseUpToResize(obj){ obj.releaseCapture(); obj.mouseDownX=0; }</script>
</head><body>
改变table的列宽度
<table id=theObjTable STYLE="table-layout:fixed" > <tr bgcolor=cccccc > <td valign=top > <font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font> 改变table的列宽度</td> <td valign=top > <font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font> 改变table的列宽度</td> <td valign=top > <font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font> 改变table的列宽度</td> </tr><tr>
<td>改变table的列宽度</td><td>改变table的列宽度</td><td>改变table的列宽度</td> </tr> </table> </body> </html>