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??