JQuery UI Resizable Fixed Size Table

Question

I'm trying to use JQuery UI Resizable in order to add resize handles to 4 Td tags in a Table.

My intention is for all td's to react to the resize and to be constrained in the table width, height. (pretty much what the resize handles used on JS Fiddle are doing)

Currently, the td's are not constrained to the table and although the handles work, if I use the handle on one side of the table, then use the second half of the handle, the second half of the handle will never go above the height (or width) I stopped at with the first half (this happens vertically and horizontally).

Here's my fiddle: http://jsfiddle.net/fdLkqv2L/

$("td").resizable({ handles: 's, e' });

Answer 1

Heres the fix man:

http://jsfiddle.net/fdLkqv2L/1/

The problem is the other cells height are not updated while resizing, and the <tr> height is the same as the highest height of its <td>s:

With this code you also resize all the siblings (all other <td>s in current <tr>):

$("td").resizable({
    handles: 's, e',
    resize: function (event, ui) {
        $(this).siblings().height(ui.size.height);
    }
});