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

Question

我编写了一个 jQuery 插件，除其他外，它使用 colgroup 设置表格列的宽度，并允许通过向左或向右拖动标题来调整它们的大小。我发布了它的精简版本 here 。它在 Firefox 中工作正常(至少 3.6)，但在其他浏览器中失败，我不知道为什么。

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

标题的大小调整是通过更改每个 col 的 width 属性来完成的，以响应鼠标拖动。原则上它工作正常，由于 colgroup 问题，它在其他浏览器中没有明显的影响(console.log 显示事件已正确触发)。

任何有关此问题的帮助将不胜感激。也欢迎就如何在没有 colgroups 的情况下完成同样的事情提出建议! (请记住，标题调整大小应更改列中所有 td 的宽度)

简化代码:

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 接受 below tbody 的 colgroup，但其他浏览器要求它是以上...

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

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

Answer 1

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

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

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