部门有一个项目界面用的html,所有的列表都用的原生table控件,一个同事找到我问有没有办法实现table的列宽拖动,好几年没摸过前台了,还真给问住了,经过网上查询资料等,最终解决,记录下:
<!DOCTYPE html> <html> <head> <title>table拖动列宽</title> </head> <body> <table width="100%" border="1" class="resizable-table"> <tr> <th width="10%">1</th> <th width="20%">2</th> <th width="70%">3</th> </tr> <tr> <td>1</td><td>2</td><td class="right">3</td> </tr> <tr> <td>1</td><td>2</td><td class="right">3</td> </tr> <tr> <td>1</td><td>2</td><td class="right">3</td> </tr> <tr> <td>1</td><td>2</td><td class="right">3</td> </tr> </table> </body> <script src="jquery.js"></script> <script src="colResizable-1.6.min.js"></script> <script src="colResizable-1.6.js"></script> </html>其中 colResizable-1.6.min.js中添加了
//初始化class为resizable-rable的列表 $("table.resizable-table").colResizable({liveDrag:true, draggingClass:"dragging"});
具体引用文件见附件