Table headers not aligned with columns

Is there any simple way to make Table headers be the same width as their columns? In my case, they are all misaligned, and I can only see how to set the width of the columns to some fixed value, like:

table.setColumnWidth(id, 100);

which is not very useful, and seems to have no impact on the header at all, anyway.

The Table headers are, for some reason, contained in a separate “table” element from the rest of the table, making this issue very difficult to manage.

Maybe I’m supposed to stop using Table, and just use Grid instead?


It sounds odd that the headers would be different width than the columns. My first guess is that you have some theme or layout problem or something like that. It would be good if you could isolate the problem to some minimal test.

3 hours later… Sure enough, I found the culprit.

I had, in my theme scss:

#mainTable td {
padding: 8px;

Apparently, this somehow confuses Vaadin into adding 8 pixels of paddiing in the header, but not in the body of the table, resulting in the headers being progressively more and more skews with respect to the body of the table.

For your amusement, I’ve attached screenshots of the results before and after removing the padding from the CSS.

Thanks for the tip. It did help me!


The # in the selector matches by element ID. The IDs are unique in the page, so you should normally avoid using those in CSS/Sass, just in case that you might have two of those in the same page in some situation. Instead prefer matching by element class that you set with addStyleName().

Well, that might not be the cause of the trouble in your case, but anyhow.