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?
25801.png

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

This looks like a subpixel issue in header width calculation. As far as I can tell, related issues include
#15298
,
#17320
and
#19698
.

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

I’ve the same problem in Firefox, Safari and IE.
With Firefox only in 90% of zoom the problem disappear.

Anyone can help me?

30517.png

Has anyone managed to solve this problem? For me, this is also true in Firefox and Google Chrome