JQuery UI Resizable <table> и фиксированная высота прокручивается

Question

Создание пользовательского интерфейса для большого набора данных. Идеальным является наличие фиксированной таблицы высот, которая прокручивается для размещения более 200 строк данных. Бонус будет заключаться в использовании пользовательского интерфейса JQuery, чтобы пользователь мог перетащить высоту таблицы, чтобы показать больше или меньше строк.

JSFiddle того, что я до сих пор: 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; 
} 

Это 50%. Вы можете изменить размер таблицы, но когда вы прокручиваете ручку, ее перетаскивают с помощью таблицы прокрутки. Я пробовал установить .ui-resizable-s абсолютным по отношению к div, но не повезло.

Кто-нибудь сталкивался с этим или любыми подходящими решениями?

Answer 1

Я думаю, это потому, что у вас есть свиток на том же div, что и размер. Попробуйте иметь внешний div как изменяемый по размеру, а внутренний div с высотой 100% со свитком. Затем поместите ручку относительно изменяемого размера div.

Это должно быть сделано, у меня будет игра с вашим jsFiddle, чтобы вы могли понять, что я имею в виду.

EDIT: Я обновил свою скрипку следующего: http://jsfiddle.net/j5cdx/4/

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