1. 程式人生 > >table實現列寬的拖動效果

table實現列寬的拖動效果

部門有一個專案介面用的html,所有的列表都用的原生table控制元件,一個同事找到我問有沒有辦法實現table的列寬拖動,好幾年沒摸過前臺了,還真給問住了,經過網上查詢資料等,最終解決,記錄下:

<!DOCTYPE html>    
 <html>    
 <head>    
   <title>table拖動列寬</title>              
 </head>    
<body>  
 <table width="100%" border="1" class="resizable-table"
>
<th width="10%">1</th> <th width="20%">2</th> <th width="70%">3</th> <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"});