table实现列宽的拖动效果

部门有一个项目界面用的html,所有的列表都用的原生table控件,一个同事找到我问有没有办法实现table的列宽拖动,好几年没摸过前台了,还真给问住了,经过网上查询资料等,最终解决,记录下:

    
 <html>    
 <head>    
   <title>table拖动列宽title>              
 head>    
<body>  
 <table width="100%" border="1" class="resizable-table">    
 <th width="10%">1th>  
 <th width="20%">2th>  
 <th width="70%">3th>  
 <tr>    
   <td>1td><td>2td><td class="right">3td>    
 tr>    
 <tr>    
  <td>1td><td>2td><td class="right">3td>     
 tr>    
 <tr>    
  <td>1td><td>2td><td class="right">3td>    
  tr>    
  <tr>    
   <td>1td><td>2td><td class="right">3td>    
  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"}); 

具体引用附件:
https://pan.baidu.com/s/1cazP50

你可能感兴趣的:(问题记录)