Using nested layouts to form a table

[narvik]

Hi.
I would like to create a table using few Layouts. Its height should depend on its contents. Everything works well when all the columns have the same amount of items. When one of them is bigger the other columns don't adjust their sizes and therefore their borders are not whole or not visible at all. The attached image shows how they are displayed when I set their heights to "*", see the code below. When I use setHeight100() their height is rendered as 0. Any ideas? Thanks.

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.Layout;
import com.smartgwt.client.widgets.layout.VLayout;

public class Application implements EntryPoint {

	private static final int COLUMNS = 8;
	private Layout[] columns = new Layout[COLUMNS];

	@Override
	public void onModuleLoad() {
		Layout mainLayout = new VLayout();
		mainLayout.setBackgroundColor("#FFFFFF");
		mainLayout.setWidth100();
		mainLayout.setAutoHeight();
		mainLayout.setBorder("1px solid red");
		
		mainLayout.addMember(addHeaderLayout());
		mainLayout.addMember(addColumnLayout());

		//fill one of the columns with items
		for (int i = 0; i < 20; i++) {
			Canvas itemCanvas = new Canvas();
			itemCanvas.setWidth100();
			itemCanvas.setHeight(15);
			itemCanvas.setBorder("1px solid #999999");
			columns[3].addMember(itemCanvas);
		}
	
		mainLayout.draw();		
	}
	
	private Layout addColumnLayout() {
		Layout columnLayout = new HLayout();
		columnLayout.setWidth100();
		columnLayout.setHeight100();
	
		for (int i = 0; i < COLUMNS; i++) {
			Layout column = new VLayout();
			column.setHeight("*");
			column.setWidth100();
			column.setBorder("1px solid green");
			columns[i] = column;
			columnLayout.addMember(column);
		}
		
		return columnLayout ;
	}

	private Layout addHeaderLayout() {
		Layout headerLayout = new HLayout();
		headerLayout.setWidth100();
		headerLayout.setHeight(20);
		
		for (int i = 0; i < COLUMNS; i++) {
			Canvas columnHeader = new Canvas();
			columnHeader.setContents("head " + i);
			columnHeader.setWidth100();
			columnHeader.setBorder("1px solid black");
			headerLayout.addMember(columnHeader );
		}
		
		return headerLayout ;
	}

}

[narvik]

My current solution, which is not ideal, is to count the height of the items in each column and set the largest one to the layout surrounding them.