Table height varies depending on table content

Hi,
I have two tables in a window, both with a pageLength of 10.
One table has two entries, the other table has no entries.

The table with the two entries is a few pixels longer (both in Chrome and Firefox) than the table without entries:

Any ideas why? This doesn't really look nice. Even without the pageLength set, this issue occurs. I am using Vaadin 7.7.0.

Here is the complete window code:

import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Table;
import com.vaadin.ui.Window;

public class TestWindow extends Window {

    public TestWindow() {
        init();
    }

    public void init() {
        setModal(true);
        center();
        setWidth(800, Unit.PIXELS);

        HorizontalLayout layout = new HorizontalLayout();

        Table leftTable = new Table();
        Table rightTable = new Table();

        leftTable.addContainerProperty("Name", String.class, null);
        rightTable.addContainerProperty("Name", String.class, null);

        leftTable.addItem(new Object { "Item A" }, 1);
        leftTable.addItem(new Object { "Item B" }, 2);

        leftTable.setPageLength(10);
        rightTable.setPageLength(10);

        layout.addComponents(leftTable, rightTable);
        setContent(layout);
    }
}

Thanks,
Dominic

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.Free ebook & tutorial.

Table height varies depending on table content

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.