I wrote a jQuery plugin that, among other things, sets the width of a table columns using colgroup, and allows them to be resized by dragging the headers left or right. I posted a stripped down version of it here. It works fine in Firefox (3.6 at least), but fails in other browsers, and I'm clueless about why.
I noticed that when I create a table with a colgroup directly in the markup, the widths are fine, but when I add them later using jQuery they are not. Maybe I'm not adding them where they're supposed to be, or maybe I'm unknowingly relying on deprecated or browser-specific behavior, I have no idea.
The resizing of the headers is done by changing the width attribute of each col, in response to a mouse drag. In principle it's working fine, it has no observable effects in the other browsers due to the colgroup issue (console.log shows the events are fired correctly).
Any help with this issue will be appreciated. Suggestions on how to accomplish the same thing without colgroups are also welcome! (remembering that a header resize should change the widths of all tds in the column)
Simplified code:
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;
Full code: jsfiddle.net/mgibsonbr/YqCsY/
P.S. Although unrelated to the problem, if anyone also knows a cross-browser way to make the headers unselectable please tell me, the resizing part will feel more "natural" this way. The relevant line in the (full) example is:
th.attr("unselectable","on").css("-moz-user-select","none")
Update: Apparently, Firefox accepts the colgroup being below tbody, but other browsers require it to be above...
// colgroup.appendTo(table);
colgroup.prependTo(table);
This fixed things in Chrome and Safari, but Opera is still not working and Opera.
