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

https://blog.csdn.net/Java_Long_Asus/article/details/87794445

 

 

此处实现页面的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
————————————————
版权声明：本文为CSDN博主「WePlay~」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Java_Long_Asus/article/details/87794445