Full height table

Hi there,

I want to use a table to visualize a multi-column layout where the user can easily change the column widths. The main problem here is: how can I realize a row to take the full table height? I tried to use several css rules:
.fullheight .v-table-body-noselection {
height: 100%;
}
.fullheight .v-table-table {
height: 100%;
}
.fullheight .v-table-cell-wrapper {
height: 100%;
}
and created the table with:
table.setCellStyleGenerator(new CellStyleGenerator() {
@Override
public String getStyle(Table source, Object itemId, Object propertyId) {
return “fullheight”;
}
});
table.addStyleName(“fullheight”);
Unfortunately the table still displays the first row with its minimum height. What I can see in Firefox is that the v-table-cell-wrapper has the height attribute with 100% but it does not expand to full height.
Is there an easier way to realize a single-row table with this row being full height? Or do I need additional css rules?

Best wishes
Markus

Using a Table for a purpose like this sounds rather dangerous. If you can get past the issue described, I bet that there will be couple of more difficult issues ahead…

Can you consider using multiple HorizontalSplitPanels (https://vaadin.com/book/vaadin7/-/page/layout.splitpanel.html) instead? Those would be much easier to theme…