table 表格拖动改变列宽

参考博客：前端页面实现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>

js

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

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

来源：CSDN

作者：haogemr

链接：https://blog.csdn.net/document_dom/article/details/104677516