Mine do but I need three pairs of glasses to make them work 
I have a pair for computer work that are larger than my reading glasses and then I have vari-vocals for every day use.
Ok, at least we know where the issue lies even if there is no perfect solution yet. It shouldn’t really be our job to second guess browser pixel discrepancies.
I changed my resolution back to 125% because the text is too small, and going back, your live demo on codepen, which didn’t show any code, works at 125%. Can you provide a link to codepen showing the code, I just want to check it again to what difference if any between resolutions. I just want to confirm if cell-spacing is affected by screen resolution or not.
Yes the live version is here:
.. and then the code version has the word ‘live’ removed from the url and replaced with ‘pen’ which shows the editor here:
NOTE: You may not be seeing the problem in the live version because your viewport may be an even pixel height in that expanded screen. Try grabbing the bottom of the browser window and making it smaller one pixel at a time to be sure that it is working. (It’s an annoying bug I know.)
In that demo, you have border-spacing defined, not cell-spacing, which I thought was the issue. Do you think its a spacing issue and not specifically border or cell spacing?
cell-spacing is an html attribute and deprecated and should not be used. border-spacing is the css equivalent and only has effect in the border-collapse:separate model as per that demo.
In the css on the demo you will see this.
border-collapse: separate;
border-spacing: 0;
That should collapse the space between cells and allow borders all around the cell.
You can’t use border-collapse:collapse because the horizontal borders will all disappear on table cells when they become sticky.
Perhaps you could try giving some border-spacing to start with and see if that is viable. You will however need to overlap the sticky element so that you don’t see the text underneath.
Here is a demo of that approach.
I think you will still see a mis-alignment but perhaps it won’t notice as much.
No its a general zoom issue on all elements but will be specifically noticeable in table-cells as they have special behaviours. It may happen on any positioned elements depending on circumstance but the chance is you would never know because they won’t be perfectly lined horizontally and vertically like tables (or grid or flex perhaps).
At 125% resolution, in the non-sticky columns, the border-spacing affects both horizontal and vertical spacing between table cells the same, consistent. With sticky columns, there is no vertical gaps between the columns, however the horizontal gap is bigger, probably 3px. Its very inconsistent to say the least.
Yes I did that on purpose otherwise you will see all the content scrolling underneath when you slide sideways.
I guessed that might happen
I don’t really know what else to suggest.
You could try no borders but then I think the cells may be mis-aligned instead and it wont’t be easy to scan.
e.g.
border: none should mean no borders at all. That is not the case. The sticky columns have horizontal borders, but not between all rows.
Thoughts?
I think that the black is a gap and is showing the black background of the table that I set. I don’t believe its a border but just that odd cells are actually misplaced by 1px.
I changed the table background to red so see if the gap changes to red.
.table-scroll table {
width: 100%;
margin: 0;
table-layout: auto;
border-collapse: collapse;
word-wrap: break-word;
border:none;
background:red;
}
Unfortunately I think we’ll have to admit defeat until the browser makers fix their scaling routines. All the sticky versions seem to fail somewhere along the way at your laptop scale.
As a test have a look at someone else’s codepen and see if similar issues occur. This only has a fixed first column though so may not exhibit the bug.
At first glance, I don’t see any border issues, but as you said, it only has one sticky column, so its not like for like comparable.
I’m seeing a missing left border on the first column when scrolling sideways. I notice they only use one sided borders so I wonder if this will have any different effect.
I’ve changed the demo to single borders just to see if there’s a difference.
I doubt it but it may look better.
It looks worse. There is no border between rows 1 and 2, 3 and 4, its like merged cells. There is a vertical gap between cols 2 and 3, just enough to see content when scrolling horizontally.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.