<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" οnmοusedοwn="MouseDownToResize(this);" οnmοusemοve="MouseMoveToResize(this);" οnmοuseup="MouseUpToResize(this);"></font> 列一</td> <td valign=top > <font class="resizeDivClass" οnmοusedοwn="MouseDownToResize(this);" οnmοusemοve="MouseMoveToResize(this);" οnmοuseup="MouseUpToResize(this);"></font> 列二</td> <td valign=top > <font class="resizeDivClass" οnmοusedοwn="MouseDownToResize(this);" οnmοusemοve="MouseMoveToResize(this);" οnmοuseup="MouseUpToResize(this);"></font> 列三</td> </tr> <tr> <td>拖动表列改变table的列宽度</td><td>拖动表列改变table的列宽度</td><td>拖动表列改变table的列宽度</td> </tr> </table> </body> </html>
