Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Table header borders do not line up with table body columns - firefox
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
Is the only answer to use the grid component?
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 !
The latest version of Firefox 47.0 has nearly solved this problem - it is now only a problem when you zoom in
Has anyone managed to solve this problem? For me, this is also true in Firefox and Google Chrome