table 表格拖动改变列宽

最新推荐文章于 2025-09-11 02:16:19 发布

转载最新推荐文章于 2025-09-11 02:16:19 发布 · 2.5k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/Java_Long_Asus/article/details/87794445

前端专栏收录该内容

56 篇文章

订阅专栏

本文介绍如何使用jQuery和colResizable插件实现前端页面中表格列宽的拖动调整功能。通过引入jQuery和colResizable的js文件，并编写相应的HTML和JS代码，可使表格列宽支持实时拖动调整，同时提供了防止拖动时出现虚标线和允许表格宽度超过父级宽度的设置。

参考博客：前端页面实现table可拖动改变列宽

引入jQuery和colResizable的js文件，colResizable支持表格拖动改变列宽，但基于jQuery

（1）colResizable下载：http://www.bacubacu.com/colresizable/#rangeSlider

（2）引入文件：

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src = "colResizable-1.6.min.js" ></script>

编写代码

html

<table id="table" cellspacing="0" cellpadding="2" border="1">
    <tbody>
        <tr align="center">
            <td style="min-width: 100px;">编号</td>
            <td style="min-width: 100px;">姓名</td>
            <td style="min-width: 100px;">性别</td>
            <td style="min-width: 100px;">生日</td>
            <td style="min-width: 100px;">民族</td>
        </tr>
        <tr>
            <td>001</td>
            <td>test</td>
            <td>001</td>
            <td>1000-00-00</td>
            <td>汉</td>
        </tr>
    </tbody>
</table>

$(function(){
	//此处实现表格可拖放属性
	$("#table").colResizable({
	  liveDrag:true,//实现实时拖动，可看见拖动轨迹
	  draggingClass:"dragging", //防止拖动出险虚标线
	  resizeMode: "overflow" //表的宽度可以超过父级宽度
	});
});

colResizable 其他属性配置项可参考：
官网地址：http://www.bacubacu.com/colresizable/
中文博客：jQuery调整表列插件__colResizable