JQuery UI Resizable <table>和固定高度可滚动

Question

为大型数据集构建UI。理想的是有一个固定的高度表，可滚动以容纳200多行数据。奖金将是使用JQuery UI来让用户拖动表格的高度以显示更多或更少的行。

的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设置为可调整大小，并使用滚动设置高度为100％的内部div。 然后相对于可调整大小的div定位手柄。

应该这样做，我会和你的jsFiddle一起玩，这样你就能明白我的意思了。

编辑：我的小提琴更新以下内容：http://jsfiddle.net/j5cdx/4/

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