I added jQuery-based code to an html table that allows you to live-resize its columns by dragging in the header. It works in Firefox, Chrome, Safari, & Opera, but fails in Internet Explorer - on mousedown the columns (wrongly) resize in IE and on mousemove the last column resizes no matter which column you click and drag.

I believe I have tracked the bug down to jQuery's width() function and in particular to its rdisplayswap.test() and the value of the rdisplayswap variable:

rdisplayswap = /^(none|table(?!-c[ea]).+)/

According to the jQuery comments:

certain elements can have dimension info if we invisibly show them

however, it must have a current display style that would benefit from this

And the comment on the rdisplayswap definition says:

// swappable if display is none or starts with table except "table", "table-cell", or "table-caption"

I think determining swappability should also include "table-col", and since it doesn't that's why, for some reason, the jQuery width() function exhibits anomalous behavior in IE.

I tried changing

rdisplayswap = /^(none|table(?!-c[ea]).+)/

to

rdisplayswap = /^(none|table(?!-c[eao]).+)/

and that fixed the problem in IE; but broke column re-sizing in all other browsers!

How can this be fixed?

(I am testing jQuery 1.10.2 in "recent" non-IE browsers [on Mac OS X], and in IE 6, 9, and 10 [on Windows XP, 7, & 8].)

See an example at:

<http://jsbin.com/OKEF/1/edit?html,output>

or:

<http://www.beforeunless.com/pages/dynamicTable-minimum>