Skip to main content

Bug Tracker

Side navigation

#14283 closed bug (notabug)

Opened August 21, 2013 09:42PM UTC

Closed March 16, 2014 03:27PM UTC

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

Reported by: deanasnyder@gmail.com Owned by: dmethvin
Priority: low Milestone: 1.11.1/2.1.1
Component: dimensions Version: 1.10.2
Keywords: Cc:
Blocked by: Blocking:
Description

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>

Attachments (0)
Change History (7)

Changed August 22, 2013 03:44PM UTC by timmywil comment:1

#14284 is a duplicate of this ticket.

Changed September 10, 2013 07:25PM UTC by dmethvin comment:2

component: unfileddimensions
milestone: None1.11/2.1
priority: undecidedlow
status: newopen

Looks like this is valid and needs a further look.

Changed October 03, 2013 05:46PM UTC by anonymous comment:3

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.

Changed December 16, 2013 05:11PM UTC by dmethvin comment:4

owner: → dmethvin
status: openassigned

Changed January 03, 2014 02:51AM UTC by dmethvin comment:5

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?

Changed March 03, 2014 05:47PM UTC by dmethvin comment:6

milestone: 1.11/2.11.11.1/2.1.1

Changed March 16, 2014 03:27PM UTC by dmethvin comment:7

resolution: → notabug
status: assignedclosed

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