I have searched extensively for an answer to this problem but not found anything
We are using Vaadin 7.4.3 with Varo theme and Firefox 46
We have a table with 10 columns
The column border for the header for the first two columns is OK
The border for the 3rd column is a misaligned very sightly
The forth is 1 pixel to the right
The fifth 1.5 pixels to the right of its column
The sixth a bit more etc etc
Then the outsideright hand border lines up
We aren’t using any particular styles - we used Reinderr and got the same problem
I have found the answer to this:
I think this is an issue with the
Text Size as set in the
Windows Display settings .
When this is set at 100% it is fine, when it is set to 125% it is NOT fine (I guess this is the same effect as with the browser zoom in Firefox)
We develop on 15" 1920x1080 laptop screens so have the text size set to 125% so it is more legible (this is the default setting) and therefore the tables do not align properly
On a 23" screen with a 1920x1080 display the text is legible at 100% and the tables are perfect.
I think our clients will be using modern laptops with their HD screens set to their default settings which means they
WILL have this problem
I think it is because the header is rendered as one table and the body is rendered as a separate table, then the borders are rendered on different elements in both - It is a miracle that it works at all!
Displaying all our data in Table is easy (text and clickable images in a cell ) but it is so difficult in Grid so we are STILL using table !