Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Where to include a web components css file when integrating a third party w by Martin Vyšný, 1 week ago
Recent Posts
Vaadin Forum3. Vaadin 6, 7, 8

Table header borders do not line up with table body columns - firefox

James Sweeting
5 years ago May 12, 2016 9:06am

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?

James Sweeting
5 years ago May 18, 2016 9:54am

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

Henri Sara
5 years ago May 30, 2016 1:11pm

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

James Sweeting
5 years ago May 30, 2016 3:01pm

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 !

James Sweeting
5 years ago Jun 20, 2016 6:52am

The latest version of Firefox 47.0 has nearly solved this problem - it is now only a problem when you zoom in

Alessandro Giordi
5 years ago Feb 07, 2017 9:26pm

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

Anyone can help me?

 

+1
Alexey Novik
3 years ago Mar 23, 2019 10:37am

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