width() on table columns fails in IE due wrong rdisplayswap value

[deanasnyder@…]

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>

[timmywil]

#14284 is a duplicate of this ticket.

[dmethvin]

Looks like this is valid and needs a further look.

[anonymous]

IE 11 preview seems to have much better behavior and the resizing works. However, the columns 'jump' as soon as you click the dragger but after that initial blip, things snap back to your cursor position.

[dmethvin]

I'm not sure that the <col> element is supposed to be used this way. It's primarily a means for classes and attributes to be attached to the corresponding elements in the column, and for columns to be grouped.

A <col> element never occupies any real width in the document, so I'm inclined to say that asking for its width is bogus and anything we try to do to measure it is wrong.

The problem can be easily worked around by measuring the width of a real element in the table such as the header: ​http://jsbin.com/iHOlAzEV/1/

Spec references:

​http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4

​http://www.w3.org/TR/html5/tabular-data.html#the-colgroup-element

Thoughts, anyone?

[dmethvin]

I'm going to close this as abuse of the <col> element. As mentioned above, there is a simple workaround.