前端页面实现table可拖动改变列宽

此处实现页面的table表格可以自由拖动列宽,拖动时表格内文字不换行,超出部分以...代替,实现步骤如下:

1.首先引入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>

2.编写js函数

<script type="text/javascript">
$(function(){
//此处实现表格可拖放属性
 $("#table").colResizable({
    liveDrag:true,//实现实时拖动,可看见拖动轨迹
    draggingClass:"dragging", //防止拖动出险虚标线
  });
});
</script>

3.编写css样式表,样式表实现当拖放到表格文字内容溢出时,不换行,溢出部分以...代替

<style type="text/css">
table{
	width:100%;
	border-collapse: collapse;
	table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
}
td{
	border:1px solid; 
	overflow:hidden;		/* 内容超出宽度时隐藏超出部分的内容 */ 
	white-space:nowrap;		/* 不换行 */
	text-overflow:ellipsis;	/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用*/
}
</style>

4.至此,可以拖动列宽的表格就制作好了

感谢博主分享:https://blog.csdn.net/u011647053/article/details/49127395

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页