使用jqueryUI实现自由调整表格列宽

　　今天项⽬中需要插⼊表格，⽤Excel表格调整列宽时，想怎么拖就怎么拖，于是乎就让插⼊的表格也这么让⼈舒服。⽹上查找许久，没找到好⽤的⽅案。最后发现jQuery UI中的resizable（）⽅法可以实现div的⾃由调整，既然可以在div上实现，那表格也应该没问题吧。于是就动⼿折腾，成功搞定。代码详情：main.jsp

<%@ page language=\"java\" contentType=\"text/html; charset=UTF-8\" pageEncoding=\"UTF-8\"%>

实现功能需引⼊jquery-ui.js 和 jquery-ui.css，因为resizable()⽅法会⽣成调⽤相应的class样式。效果图如下：

为table加上 table-layout: fixed; 并为td加上overflow: hidden; 可实现隐藏列中超出内容。

调整功能是实现了，不过右下⾓的这个⼩三⾓就看着让⼈整个就不好了。于是查看源码，发现调⽤了resizable()之后是在th中⽣成了三个div，最后⼀个就是⼩三⾓的样式。

通过js移除⽅式：$(\"th > div:last-child\").removeClass();

另外通过分析resizable()的源码实现，也可以直接修改源码移除⼩三⾓。

在jquery-ui.js中找到下⾯这段，将classes删除或将值置空即可。最后⼩三⾓就没了。

\"ui-resizable-se\":\"\"

$.widget( \"ui.resizable\ version: \"1.12.1\

widgetEventPrefix: \"resize\ options: {

alsoResize: false, animate: false,

animateDuration: \"slow\ animateEasing: \"swing\ aspectRatio: false, autoHide: false, classes: {

\"ui-resizable-se\": \"ui-icon ui-icon-gripsmall-diagonal-se\" },