jquery resizable containment in table

Question

I have a table which contains a Div which I would like to be resizable. I need to know how to set the container element for this div.

I have tried solving this problem by creating a div around the table, to act as a container, but resizable() still doesn't allow the contents to be re-sized.

Can somebody tell me how to make a working container?

I have create a fiddle with an example of what I have currently tried: http://jsfiddle.net/XTPZ8/

$(".resizable-div").resizable({
        handles:'e, w',
        containment:".containment-div"
    });

.containment-div {
    position: absolute;
    width: 303px;
    height: 200px;
    border: 1px solid red;
}

.resizable-div {
    position: absolute;
    width: 40px;
    height: 30px;
    border: 1px solid green;
}​

Answer 1

Change the containment to parent

    $(".resizable-div").resizable({
        handles:'e, w',
        containment:"parent"
    });

DEMO http://jsfiddle.net/XTPZ8/1/

When you set it to the table parent, the resize is overflowing the cell, causing it to expand, which unfortunately is normal table behavior.

Answer 2

change handles e,w to this

$(".resizable-div").resizable({ handles: "n,s,ne,se,nw,sw", containment:".containment-div" });