设置 vaadin 表格高度以适合内容答案

【问题标题】：Set vaadin table height to fit contents设置 vaadin 表格高度以适合内容
【发布时间】：2012-08-15 12:52:26
【问题描述】：

我在我的项目中使用 CustomLayout 来分离 UI 对象及其样式。

我的表格有些问题。

我定义了一个 div，我希望表格的高度设置为 div 的高度。

最好的方法是什么？

我想：

table.setsizeFull() ;
table.setPageLength(0);

在代码中，但结果不是我想要的。我希望表格在 div 的尺寸中全尺寸，无论里面有没有元素。

有什么建议吗？

【问题讨论】：

我不确定它是否会有所帮助，但在您的示例中“长度”拼写错误。
我的错，但这不是问题，谢谢！
我对 Vaadin 一无所知，所以这可能无济于事，但您可以使用 CSS 做到这一点：jsfiddle.net/HVk5r
@BillyMoat 有点复杂

标签： css vaadin

【解决方案1】：

我正在解决一个类似的问题：我希望一个表随着我添加行而增长。我不关心它的确切高度，只要它显示所有数据行，并随着我添加行而增长。我还希望表格始终在底部显示一些额外的空间。

这里的核心思想是我做了三件事：

请勿为餐桌致电setHeight()。
我使用setPageLength() 按行定义表格高度--表格应该有多少行。
我在调整大小的元素上调用了requestRepaint()。如果我调整了列元素的大小，我会在列元素上调用它。如果我调整了桌子的大小，我会在桌子上调用它。

这是一个通用的代码示例，展示了我是如何解决这个问题的。我的代码不完整，但它可能会帮助您入门。

public class MyClass extends Table {

    public MyClass(...)
    {
        this.setWidth("100%"); // fill parent <td>'s width, allows draggable sizing.
        // note: do NOT setHeight().

        setupColumns(); // details not shown here
        setupBehavior(); // details not shown (listeners, etc)
        addDataToTable(); // details not shown

        adjustHeight();
    }

    // I also have a function to add rows to the table when 
        // a button is clicked.  That function calls adjustHeight() (shown below).

    public void adjustHeight()
    {
        this.setPageLength(this.getItemIds().size() + 1);
        this.requestRepaint();
    }
}

[EDIT/FOLLOW-UP] 我发现如果您使用setColumnExpandRatio()（动态列宽），使用此方法往往会导致在表格上呈现不必要的滚动条。所以提醒一下，如果你使用我上面展示的技巧，你应该使用固定宽度的列 (setColumnWidth())。

【讨论】：