colResizable插件实现网页中表格列宽自定义

需求:页面上每个字段的列宽,可以通过页面拖动的形式进行调整。

colResizable插件实现网页中表格列宽自定义_第1张图片

解决方法:使用jQuery的一个插件,名称叫 colResizable,可以实现。

插件官网

colResizable – 可调整大小的列和表 (bacubacu.com)

说明:

该插件依赖jQuery,所以需要在使用前引用jQuery。

使用示例代码:

$(function(){
	// 表格宽度动态变化
	$(".Table").colResizable({
		liveDrag:true,
		minWidth: 60,
		draggingClass:"dragging",
		resizeMode:'fit',
		onResize: function(e) {
		}
	});
})

.Table指表格中table的class名称。

你可能感兴趣的:(html/css,js/jq,列表字段拖动,表格宽度自定义)