JGrid中拖动改变列宽的脚本 原型_javascript技巧

顺便，把我研究过的，如何隐藏、显示一列的方法也实现了一把。但是这个功能和 css border-collapse:collapse; 有冲突，详情见代码2

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jgrid拖动改变表格宽度</title> <style type="text/css"> </style> <div> <table id="dataTable" border="1" cellpadding="0" cellspacing="0" style="table-layout:fixed;"> <colgroup> <col style="width:200px;"> <col style="width:100px;"> <col style="width:100px;"> <col style="width:100px;"> <col style="width:100px;"> </colgroup> <tr> <td>拖动我1</td> <td>拖动我2</td> <td>拖动我3</td> <td>拖动我4</td> <td>拖动我5</td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

修改版2

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jgrid拖动改变表格宽度_修改版</title> <style type="text/css"> </style> <div> <table id="dataTable" border="1" cellpadding="0" cellspacing="0" style="table-layout:fixed;border-collapse:collapse;"> <colgroup> <col style="width:200px;"> <col style="width:100px;"> <col style="width:100px;"> <col style="width:100px;"> <col style="width:100px;"> </colgroup> <tr> <td>拖动我1</td> <td>拖动我2</td> <td>拖动我3</td> <td>拖动我4</td> <td>拖动我5</td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

ff下拖动时一大块影子是怎么产生的呢

是故意显示出来的。
把 -moz-opacity:0.1;opacity: 0.1 改掉。