Question

我编写了一个jQuery插件，除其他外，使用colgroup设置表格列的宽度，并允许通过向左或向右拖动标题来调整它们的大小。我发布了一个精简版here。它在Firefox中运行良好（至少3.6），但在其他浏览器中失败，我对其原因一无所知。

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

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

对此问题的任何帮助将不胜感激。关于如何在没有colgroup的情况下完成同样的事情的建议也是受欢迎的！（记住标题调整大小应该改变列中所有tds的宽度）

简化代码：

console.log

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

P.S。虽然与问题无关，但是如果有人也知道跨浏览器的方式来使标题不可选请告诉我，调整大小部分会以这种方式感觉更“自然”。（完整）示例中的相关行是：

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;

更新：显然，Firefox接受th.attr("unselectable","on").css("-moz-user-select","none") 下面的 colgroup，但其他浏览器要求它 ...

tbody

Chrome和Safari中的这个固定内容，~~但是Opera仍然没有工作~~和Opera。

Answer 1

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

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

修改：针对无法选择的问题，在another question中找到答案。

动态创建的colgroup无法正常工作

1 个答案: