Specifying custom table header's css class

Hey there,

We’ve been using Vaadin with Liferay in some projects at my workplace and so far, so good.

But we’ve been struggling with specifying a table’s column width
the style attribute.

We just want the columns’ width to match and adding a CSS class for each one is the easy way to go but we can’t seem to do it using Vaadin.

Can I have some recommandations on how we should tackle this problem ?




I’m using Vaadin 7.1.1 with liferay and I have the same problem.
How can I add a different class in each column header and footer.
table.setCellStyleGenerator works only for cells into the table, not for header and footer.

If anyone has tips to do this, it will be very helpfull.


There is an
enhancement request
to add support for generating styles for header cells.

If column order is fixed, one workaround could be to use “nth-child” CSS selectors. They work in pretty much all modern browsers but not in IE8 and earlier.

Workaround for IE8

  1. Add selectivizr.js from http://selectivizr.com to your project
  2. Add @com.vaadin.annotations.JavaScript({“selectivizr.js”}) to your UI class

Why is this still open?


I suppose it’s fairly easy to fix…

So are probably a thousand other enhancement requests and bugs… When you factor in deciding on the API, writing automated regression tests, code review etc. this would probably take several hours to implement, and our resources (while expanding) are limited.

If you want to contribute a proposed solution for this, see
and especially

@Henri: I will try to do that. It’s just that with the agreement and all, the process is quite involved, compared to other open-source projects.