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

【问题标题】：JQuery UI Resizable <table> and fixed height scrollableJQuery UI Resizable <table> 和固定高度可滚动
【发布时间】：2013-02-22 14:42:21
【问题描述】：

为大型数据集构建 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 的绝对值，但没有成功。

有没有人遇到过这个或任何合适的解决方案？

【问题讨论】：

标签： jquery jquery-ui scroll html-table resizable

【解决方案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??

【讨论】：