如何使用jquery调整表格单元格的大小？

我有一个2个单元格表，我想使用jQuery抓取第一个可resize

Answer 1

我还建议使用jQuery UI Resizable和一些增强function。 我可以使用有效的HTML运行它，在resize时更新表的COLGROUP区域。 我在http://ihofmann.wordpress.com/2012/07/31/resizable-table-columns-with-jquery-ui/上描述了完整的解决方案。

短的将是：

1）HTML表格在其COLGROUP区域中指定初始宽度，并具有CSS属性table-layout：fixed。 2）使用jQuery UI的.resizable（）装饰TH元素。 3）在resize开始时：找到活动TH的匹配COL元素并记住原始宽度。 4）resize时：计算resize增量并更新（增加/减少）所选的COL元素。 这将使用每个浏览器调整整个列的大小。

$(".resizable th").resizable({ handles: "e", // set correct COL element and original size start: function(event, ui) { var colIndex = ui.helper.index() + 1; colElement = table.find("colgroup > col:nth-child(" + colIndex + ")"); // get col width (faster than .width() on IE) colWidth = parseInt(colElement.get(0).style.width, 10); originalSize = ui.size.width; }, // set COL width resize: function(event, ui) { var resizeDelta = ui.size.width - originalSize; var newColWidth = colWidth + resizeDelta; colElement.width(newColWidth); // height must be set in order to prevent IE9 to set wrong height $(this).css("height", "auto"); } }); 

Answer 2

jQuery UI有一个可resize的插件 ，允许您使页面上的元素可resize。

但是，我可以想象调整表格单元格会很有趣，特别是因为它们可能会连续共享空间。 看看alsoResize选项; 您可能需要缩小其他单元格，而另一个单元格向上扩展，反之亦然。

此外，在操作table元素时，IE是臭名昭着的，所以YMMV。

Answer 3

我不知道有什么方法可以对“vanilla”html表做这个。 但是，我目前正在使用jqGrid jQuery插件在我的页面上提供更丰富的数据表。 它包括（除其他外）单击并拖动列宽的大小调整。