Column width wrong if header larger than data


I’m not sure whether it is a bug or whether I do something wrong. If the width of the column header is larger than the width of any of its data cells then the column is not as wide as the header but some extra space is added to the width. It seems as if the padding of the data cells are added to the header before comparing the maximum of all width and after that the padding of the header is added as well. If the header is smaller that one of the data cells then the column is as wide as the largest data cell (+paddding). See example:

public class VaadinTestApplication extends Application {
	private static final long serialVersionUID = 1L;
	private static final String COL1 = "Col1";
	private static final String COL2 = "Col2";
	private static final String COL3 = "Col3";
	private static final String COL4 = "Col4";

	public void init() {
		final Window mainWindow = new Window("Vaadin Playground");
		Component content = createTable();
		mainWindow.setWidth(100, Sizeable.UNITS_PERCENTAGE);

	private Table createTable() {
		Table table = new MyTable();
		table.setColumnHeader(COL1, "Column 1");
		table.setColumnHeader(COL2, "Column 2");
		table.setColumnHeader(COL3, "Column 3");
		table.setColumnHeader(COL4, "Column 4");
		table.addContainerProperty(COL1, String.class, "");
		table.addContainerProperty(COL2, String.class, "");
		table.addContainerProperty(COL3, String.class, "");
		table.addContainerProperty(COL4, String.class, "");
		table.setColumnExpandRatio(COL1, 0);
		table.setColumnExpandRatio(COL2, 0);
		table.setColumnExpandRatio(COL3, 0);
		table.setColumnExpandRatio(COL4, 1);
		for (int i=0; i<10; i++) {
			Item item = table.addItem(Long.valueOf(i));
			item.getItemProperty(COL1).setValue("(row " + i + ")");
			item.getItemProperty(COL2).setValue("Value of column 2 (row " + i + ")");
			item.getItemProperty(COL3).setValue("Value of column 3 (row " + i + ")");
			item.getItemProperty(COL4).setValue("Value of column 4 (row " + i + ")");
		return table;


The corresponding css:

@import "../reindeer/styles.css";

.v-table-cell-content {
	padding: 0px 15px;

As you can see in the attached screenshot, there is extra space in the first column which is not what I would expect. I would expect the column to be as wide as the header + header padding. The other column widths are as expected.

What do I do wrong? Or is it a bug?


Any opinion on this one? Bug or programming error?