JQuery UI Resizable <table> and fixed height scrollable

Question

Building a UI for a large dataset. The ideal is to have a fixed height table which is scrollable to accommodate 200+ rows of data. A bonus would be to use JQuery UI to enable the user to drag the height of the table to show more or less rows.

JSFiddle of what I have so far: http://jsfiddle.net/jonbrownm/j5cdx/

HTML

<div>
<table>
    <tbody>
        <tr>
            <td>Clementine</td>
            <td>Bradford</td>
            <td>neque@in.org</td>
        </tr>
        ...
    </tbody>
</table>

JQUERY

$(function () {
  $("div").resizable({
    handles: "s"
  });
});

CSS

div {
  width:100%;
  height: 100px;
  overflow-y:auto;
  overflow-x:hidden;
}
div .ui-resizable-s {
  height: 20px;
  background: red;
  cursor: s-resize;
  border: solid 1px red;
  width: 100%;
  bottom: -5px;
  left: 0;
}

It's 50% there. You can resize the table, but when you scroll the handle gets dragged with the scrolling table. I have tried setting .ui-resizable-s absolute in relation to div, but with no luck.

Has anyone come across this or any suitable solutions?

Answer 1

I think it's because you have the scroll on the same div as the resize. Try having an outer div as resizable, and an inner div with height 100% with the scroll. Then position the handle relative to the resizable div.

That should do it, I'll have a play with your jsFiddle so you can see what I mean.

EDIT: I updated your fiddle to the following: http://jsfiddle.net/j5cdx/4/

Why do I need to accompany my fiddle link with code stack overflow??