I've got a table in a div, with a vertical scrollbar on the div to allow the table to be longer than the div can hold. Works fine. But I'd like to allow the user to resize the div vertically if they want to be able to view more of the table. I've been playing with the jQueryUI resizable interaction, but it doesn't seem to quite do what I want; at least, not so far. I've tried making the wrapper div resizable, but the behavior's erratic.

If I have the style "height:20em; overflow:auto;" on it, then I can resize the table horizontally, but not vertically. If I remove the overflow, then the table flows outside the div of course. If I remove the height, then the table is actually resizable, but it is initially drawn at full height. Anyone know of a way to specify an initial height, but allow it to be resized larger than that?

If I make the table resizable rather than the div, then I can resize the table horizontally within the div but I can't increase the height of the displayed table. Which makes sense, of course, but I thought I'd mention it.

Also, is there a way to make the resize "handle" the corner between the horizontal and vertical scrollbars? Right now it's a sort of invisible handle in the bottom-right of the table.

Thanks for any thoughts.