1 colResizable 的簡單介紹
colResizable是一個免費的jQuery插件，旨在通過手動拖動列錨點來增強任何類型的HTML表對象，從而增加列重新調整大小的功能。它兼容鼠標和觸摸設備，並具有一些不錯的功能，如頁面刷新或回發后的布局持續性以及與百分比和基於像素的表格布局的兼容性。它的體積很小（colResizable 1.0只有2kb），它與所有主流瀏覽器（IE7 +，Firefox，Chrome和Opera）完全兼容。
2 colResizable 的下載
官網地址：http://www.bacubacu.com/colresizable/
點擊下載就可以直接下載到本地啦；
3 colResizable 的使用
在項目中通過script直接引入，另外jquery中的min.js 和bootstrap.js 文件是在之前就引入的。因為使用了jquery，所以需要在函數中進行colResizable 的配置。
(function ($) {
$(document).ready(function () {
$("#testTable").colResizable({ // 為你要進行拖拽的表格
colReorder: true //拖拽 colResizable 的拖拽的配置項
});
})(jQuery);
加入以上代碼就可以實現表格的拖拽，此插件可以自動識別鼠標，當你手標划入表頭時，表頭會顯示拖拽的圖標，鼠標拖拽就可以實現你想要的效果啦。當然此插件還有其他的配置項，可以根據官網查詢自己所需要的配置項，直接繼續添加就可以；
colResizable提供了一些自定義屬性，以便修改其外觀和工作方式：
resizeMode： [type：string] [default：'fit'] [version：1.6] [values：'fit'，'flex'，'overflow']
它用於設置resize方法的工作方式。這些是可能的值：
'fit'：這是默認的調整大小模型，其中調整列的大小不會改變表寬度，這意味着當擴展列時，下一個縮小。
'flex'：在此模式下，如果父容器中有足夠的空間，表可以更改其寬度，並且每列可以單獨收縮或展開。如果沒有足夠的空間，列將在調整大小時共享其寬度。表永遠不會比其父級更大。
'overflow'：允許使用父容器溢出來調整列的大小。
disable：[type：boolean] [default：false] [version：1.0]
當設置為true時，它旨在刪除所有先前添加的增強功能，例如由此插件分配給單個或一組表的事件和其他DOM元素。在使用JavaScript從文檔對象樹中刪除之前，需要禁用先前的colResized表，以及在對已經colResized表的任何DOM操作之前，例如添加列，行等。
disabledColumns：[type：array of int] [default：[]] [version：1.6]
要排除的列索引數組，因此無法手動拖動它們。
liveDrag：[type：boolean] [default：false] [version：1.0]
設置為true時，在拖動列錨點時更新表格布局。啟用liveDrag會消耗更多CPU，因此不建議用於慢速計算機，特別是在處理大型或極其復雜的表時。
postbackSafe：[type：boolean] [default：false] [version：1.3]
此屬性可用於指定在回發或瀏覽器刷新后手動選擇的列寬必須保持不變。此功能主要面向使用服務器端邏輯（代碼隱藏）創建的頁面，例如PHP或.NET，並且它僅與具有sessionStorage支持的瀏覽器（所有現代瀏覽器）兼容。但是，如果您的目標是舊版瀏覽器（例如IE7和IE8），您仍然可以使用sessionStorage.js模擬sessionStorage。需要注意的是，某些瀏覽器（IE和FF）在直接從本地文件系統運行網站時不啟用sessionStorage對象，因此如果要測試此功能，建議通過Web服務器查看網站或使用沒有此限制的瀏覽器，如Chrome或Opera。不要擔心兼容性問題，一旦您的網站在互聯網上，所有瀏覽器將以完全相同的方式運行。
partialRefresh：[type：boolean] [default：false] [version：1.5]
如果表位於updatePanel內或使用ajax進行任何其他類型的部分頁面刷新，則此屬性應設置為true。在部分部分刷新之前和之后，表的ID應該相同。
HEADERONLY：[type：boolean] [default：false] [version：1.2]
此屬性可用於防止柱錨的垂直擴展以適合表高度。如果將其設置為true，則列處理程序的大小將限制為第一行的垂直大小。
innerGripHtml：[type：string] [默認：空字符串] [版本：1.0]
其目的是通過定義要在列夾點中使用的HTML來允許列錨定制，以提供一些視覺反饋。它可以以多種方式使用以獲得非常不同的輸出，並且可以通過將其與draggingClass屬性組合來增加其靈活性。
draggingClass：[type：string] [默認：內部css類] [版本：1.0]
此屬性用作拖動時分配給列錨點的css類。它可用於視覺反饋目的。
minWidth：[type：number] [默認：15] [版本：1.1]
此值指定列允許的最小寬度（以像素為單位）。
hoverCursor：[type：string] [默認：“e-resize”] [版本：1.3]
此屬性可用於自定義當用戶位於列錨點時將顯示的光標。
dragCursor：[type：string] [默認：“e-resize”] [版本：1.3] 定義用戶調整列大小時將使用的游標。
postbackSafe：[type：boolean] [default：false] [version：1.3]
只有啟用了postbackSafe時，刷新才有效。其目的是刪除與當前表格布局相關的所有先前存儲的數據，以使其恢復到其原始布局，從而防止在回發后恢復寬度。
marginLeft：[type：string / null] [default：null] [version：1.3
如果目標表包含顯式的margin-left CSS規則，則必須在此屬性中使用相同的值（例如：“auto”，“20％”，“10px”）。需要它的原因是因為大多數瀏覽器（除了IE之外）都不允許直接訪問應用於原始單元中元素的當前CSS規則（例如“％”，“em”或“auto”）值）。如果您知道任何不涉及迭代網站中定義的所有樣式和任何其他外部依賴項的解決方法，請告訴我們！
marginRight：[type：string / null] [default：null] [version：1.3]
它的行為方式與前一個屬性完全相同，但應用於右邊距。
fixed：[DEPRECATED：改為使用resizeMode] [type：boolean] [default：true] [version：1.5 only]
它用於設置resize方法的工作方式。在固定模式下，調整列的大小不會改變總表寬度，這意味着當擴展列時，下一個列會縮小。如果fixed設置為false，則table可以更改其寬度，並且每列可以單獨收縮或擴展。
注意：有一個已知問題，其中CSS屬性table-layout：fixed; 通過調整表格寬度來引起輕微沖突。請務必注意，固定設置與CSS屬性不同，建議不要將該樣式應用於表格。