resizable does not work for table headers in Firefox

[rolinek]

We are using ui.resizable to resize table columns. We can't get ui.resizable to work for table header on Firefox (it works on Chrome, IE9, Safari), it seems to crash inside Firefox. We can resize div element using ui.resizable without any problems in Firefox. We tried different combinations of jquery, jquery ui (1.8.11 distributed with MS Studio 2010, 1.8.17) and Firefox (9 & 10).

Is this a known issue? Is there a work around?

[rolinek]

Link to jfFiddle example: ​http://jsfiddle.net/UVsKp/

[rdworth]

This is a known issue (and quite an old one) in Firefox. See ​https://bugzilla.mozilla.org/show_bug.cgi?id=63895

A work-around (not without consequences) may be

td, th { display:inline-block; }

or you could have a div fill the cell and make the div resizable.

[rdworth]

Similar to (but different than) #5017

[tj.vantoll]

Verified this is still an issue in jQuery UI 1.9 and Firefox 16 - ​http://jsfiddle.net/AEqAE/.

[aboyd]

float: right; height: 29px; margin: -6px -14px -6px 0; position: static; width: 7px;

I put this css on the ui-resizable-handle div that gets put inside the th.

Here is some css that I used as a workaround. Obviously you would have to change the "height" as per your specifications. But it works in firefox and other browsers too.