Table header & content misalignment

Java: 8 40
Vaadin: 7.4.2
Theme: Standard, no modifications

Sometimes the Table header does not align with the body content as shown in the attached image.

Is there a known root cause of the issue?

Is there a work around, or something I can due to fix the problem?

The problem seems more noticeable as the number of columns increase.


Do you have any other style set on your table? Can you reproduce it in a small demo?

Might be a bug, though I can’t reproduce it.

Anyway, as of 7.4 Grid was introduced and one of its purposes is to replace Table. So try to use Grid instead of Table. Hopefuly the problem will go away.

Thank you for the grid recommendation. I replaced all the tables with grids and the problem has disappeared.

After replacing all the grid to tables, I noticed several issues:

  1. Scrollbars
    : The Grid scrollbars and Panel scrollbars could exist at the same time, providing a bad user experience.
    To resolve the issue, I had to use the following to force the grid to be smaller than the container Panel grid.setHeightByRows(..); 2.
    : Missing data formatting features. I use the following table features help compact the view

table.addStyleName(ValoTheme.TABLE_NO_HORIZONTAL_LINES); table.addStyleName(ValoTheme.TABLE_COMPACT); table.addStyleName(ValoTheme.TABLE_SMALL); What is the best way to compact the Grid?


  1. Maybe you can skip adding the Grid in a Panel.

  2. Those styles are intended only for Table, so I don’t think they’ll work for Grid.
    Regarding data formatting, if I got your question right, look for column renderer. You can do more the just formatting with that.