前端頁面實現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