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属性不同，建议不要将该样式应用于表格。