table实现列宽的拖动效果

最新推荐文章于 2024-01-05 00:09:56 发布

java_here

最新推荐文章于 2024-01-05 00:09:56 发布

阅读量1k

点赞数

分类专栏：问题记录文章标签： table 拖动

本文链接：https://blog.csdn.net/java_here/article/details/84912991

版权

问题记录专栏收录该内容

2 篇文章 0 订阅

订阅专栏

部门有一个项目界面用的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"});

具体引用文件见附件

java_here

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
table实现列宽的拖动效果

部门有一个项目界面用的html，所有的列表都用的原生table控件，一个同事找到我问有没有办法实现table的列宽拖动，好几年没摸过前台了，还真给问住了，经过网上查询资料等，最终解决，记录下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;table拖动列宽...
复制链接

扫一扫