使用jQuery调整表格列
这是唯一可以find调整表格列宽度的jQuery插件，但是它不能很好的与我的表格集成，并且有不必要的膨胀（保存在cookie中）。 有没有其他插件只是调整列的大小？ （不DataGrid插件，请不要build议这些）。
如果没有，我会写我自己的，它不应该太难，我只是不知道如何检测当用户点击TD边界（resize）。 有任何想法吗？
:-)一旦我发现自己在相同的情况下，没有匹配我的requeiments，所以我花了一些时间开发我自己的一个jQuery插件： colResizable
关于colResizable
colResizable是一个免费的jQuery插件来调整表格列的大小，以手动拖动它们。 它兼容鼠标和触摸设备，并具有一些很好的function，如页面刷新或回发后的布局持久性。 它适用于百分比和基于像素的表格布局。
它的尺寸很小（colResizable 1.0只有2kb），并且与所有主stream浏览器（IE7 +，Firefox，Chrome和Opera）完全兼容。
特征
colResizable是由于没有其他类似的插件与下列function被发现：
- 兼容鼠标和触摸设备（PC，平板电脑和手机）
- 兼容百分比和基于像素的表格布局
- 调整列大小不改变总表宽度（可选）
- 不需要外部资源（如图像或样式表）
- 页面刷新或回发后的可选布局持久性
- 自定义列锚点
- 占地面积小
- 跨浏览器兼容性（IE7 +，Chrome，Safari，Firefox）
- 活动
与其他插件比较
colResizable是最精致的插件，可以调整表格列的大小。 它有很多定制的可能性，它也与触摸设备兼容。 但是可能使colResizable最大的select最有趣的特点是它与基于像素和stream体百分比表格布局兼容。 但是这是什么意思？
如果表的宽度设置为90％，并且使用colResizable修改列宽，则在调整浏览器大小时，按照比例调整列宽。 虽然其他插件确实有些奇怪，但colResizable的function与预期一致。
colResizable也与table max-width属性兼容：如果所有列的总和超过表的最大宽度，它们将自动修复和更新。
与其他插件相比，另一个很大的优势是，如果表格位于updatePanel内部，它与页面刷新，回发甚至部分回发兼容。 它与所有主stream浏览器（IE7 +，Firefox，Chrome和Opera）兼容，而其他插件则以旧IE版本失败。
看样品和JSFiddle 。
代码示例
$("#sample").colResizable({ liveDrag:true });
所以我开始写自己的，只是裸骨function现在，将在下周工作… http://jsfiddle.net/ydTCZ/
这里有一个简短的完整的html例子。 看演示http://jsfiddle.net/CU585/
<!DOCTYPE html><html><head><title>resizable columns</title> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script> <style> th {border: 1px solid black;} table{border-collapse: collapse;} .ui-icon, .ui-widget-content .ui-icon {background-image: none;} </style> <body> <table> <tr><th>head 1</th><th>head 2</th></tr><tr><td>a1</td><td>b1</td></tr></table><script> $( "th" ).resizable(); </script></body></html>
尝试flexigrid ，这里是一个更多的参考
或者试试我的解决scheme： http : //robau.wordpress.com/2011/08/16/unobtrusive-table-column-resize-with-jquery-as-plugin/ 🙂
我试图添加到@ user686605的工作：
1）将光标更改为在第th个边界的col-resize
2）修正resize时突出显示的文字问题
我在两个部分成功。 也许有人更好的CSS可以帮助推动这一进展？
http://jsfiddle.net/telefonica/L2f7F/4/
HTML
<!--Click on th and drag...--> <table> <thead> <tr> <th><div class="noCrsr">th 1</div></th> <th><div class="noCrsr">th 2</div></th> </tr> </thead> <tbody> <tr> <td>td 1</td> <td>td 2</td> </tr> </tbody> </table>
JS
$(function() { var pressed = false; var start = undefined; var startX, startWidth; $("table th").mousedown(function(e) { start = $(this); pressed = true; startX = e.pageX; startWidth = $(this).width(); $(start).addClass("resizing"); $(start).addClass("noSelect"); }); $(document).mousemove(function(e) { if(pressed) { $(start).width(startWidth+(e.pageX-startX)); } }); $(document).mouseup(function() { if(pressed) { $(start).removeClass("resizing"); $(start).removeClass("noSelect"); pressed = false; } }); });
CSS
table { border-width: 1px; border-style: solid; border-color: black; border-collapse: collapse; } table td { border-width: 1px; border-style: solid; border-color: black; } table th { border: 1px; border-style: solid; border-color: black; background-color: green; cursor: col-resize; } table th.resizing { cursor: col-resize; } .noCrsr { cursor: default; margin-right: +5px; } .noSelect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
虽然很晚，希望它仍然有助于某人：
这里和其他post中的许多评论都关心设置初始大小。
我用jqueryUi.Resizable 。 初始宽度应在第一行（<TR>）的每个“<td>”标签内定义。 这与colResizablebuild议的不同。 colResizable禁止在第一行定义宽度，在那里我不得不定义宽度在“<col>”标签，而不是与jqueryresizable的consikstent。
下面的代码片段非常整洁，比平时更容易阅读：
$("#Content td").resizable({ handles: "e, s", resize: function (event, ui) { var sizerID = "#" + $(event.target).attr("id"); $(sizerID).width(ui.size.width); } });
内容是我的表的ID。 手柄（e，s）定义了插件可以改变大小的方向。 你必须有一个链接到jquery-ui的CSS，否则它将无法正常工作。
我已经做了我自己的jQuery UI部件，只是想它是否足够好。
