jquery - 动态创建的colgroup不起作用

我写了一个jQuery插件，除其他外，它使用colgroup设置表列的宽度，并允许通过向左或向右拖动标题来调整它们的大小。我发布了它的简化版本here。它在Firefox（至少3.6）中可以正常工作，但在其他浏览器中却无法运行，我也不知道为什么。

我注意到，当我直接在标记中创建带有colgroup的表时，宽度很好，但是当我以后使用jQuery添加它们时，宽度就不合适了。也许我没有将它们添加到应有的位置，或者我在不知不觉中依赖于过时或特定于浏览器的行为，我不知道。

通过更改每个width的col属性（以响应鼠标拖动）来调整标题的大小。原则上，它工作正常，由于colgroup问题（console.log显示事件已正确触发），在其他浏览器中没有可观察到的效果。

任何与此问题的帮助将不胜感激。也欢迎提出关于如何在没有同事的情况下完成同一件事的建议！ （请记住，调整标头的大小应更改列中所有tds的宽度）

简化代码：

var colgroup = $('<colgroup/>');
table.find("td,th").each(function() {
    create_col($(this)).appendTo(colgroup);
});
colgroup.appendTo(table);

// Inside create_col:
var col = $('<col width="' + width + '"/>');
return col;

完整代码：jsfiddle.net/mgibsonbr/YqCsY/

附言尽管与问题无关，但是如果有人也知道跨浏览器的方法可以使标头变为不可选择状态，请告诉我，调整大小的部分将使这种方式更加“自然”。 （完整）示例中的相关行是：

th.attr("unselectable","on").css("-moz-user-select","none")

更新：显然，Firefox接受colgroup低于tbody，但其他浏览器要求它高于 ...

// colgroup.appendTo(table);
colgroup.prependTo(table);

这修复了Chrome和Safari中的问题，但Opera和Opera仍然无法正常工作。

最佳答案

如更新中所述，colgroup必须在表中的tbody之前，以便大多数浏览器考虑。

// colgroup.appendTo(table);
colgroup.prependTo(table);

编辑：对于无法选择的问题，在another question中找到了答案。