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

JQuery UI可调整大小和固定高度可滚动<table> </table>

1 个答案: