Javascript 可调整大小的表列

我正在开发一个web应用程序，正在寻找一种创建自己的数据网格的方法

我知道有很多很棒的脚本，有各种各样的提示，但我需要自己的特定功能、css样式以及在其中使用自己的ui控件的能力

真的，我唯一需要的是能够调整列的大小。我真的不在乎标记是否维护行结构或不具有语义，因为所有数据都将由ajax请求填充

我在想一个可能的解决办法是把每一列都变成一个div

---

有没有可以帮助我的教程？

不是真正的教程，而是一个你可以从中学习的简单示例：

我建议与一些增强功能一起使用。该插件实际上只关注大小调整，并支持完全定制，因为您可以在任何事件中添加自己的回调函数。但是，默认情况下，插件无法重新调整表头，但我可以使其使用有效的HTML运行，并在调整大小时更新表的COLGROUP区域

具体设想是：

HTML表格在其COLGROUP区域中指定初始宽度，并具有CSS属性表格布局：固定

用jQuery UI的.resizeable（）装饰元素

开始调整大小时：找到活动TH的匹配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");
 }
});

我描述了完整的解决方案，包括JavaScript、HTML标记、跨浏览器CSS和现场演示