Question

我有一个2个单元格表，我想使用jQuery

使用抓手进行第一次调整大小

Answer 1

jQuery UI有resizable plugin，允许您在页面上调整元素大小。

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

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

Answer 2

我还建议使用jQuery UI Resizable和一些增强功能。我可以使用有效的HTML运行它，在调整大小时更新表的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）在调整大小开始时：找到活动TH的匹配COL元素并记住原始宽度。 4）调整大小时：计算调整大小增量并更新（增加/减少）所选的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 3

我不知道如何对“vanilla”html表做这件事。但是，我目前正在使用jqGrid jQuery插件在我的页面上提供更丰富的数据表。它包括（其中包括）单击并拖动列宽的大小调整。

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

3 个答案: