When I run this code http://jsfiddle.net/KW3Dw/4/ in Chrome and Firefox, both display border differently. I see a dash in between adjacent cells in Chrome, while in Firefox, it's rendered without any dashes. How can i fix this?
Asked
Active
Viewed 5,494 times
8
-
if the width of the first cell makes the border end in a dot, and the next cell's border starts with a dot it shows a "dash", which are 2 dots next to each other. You can force the first cell's width to match an uneven times the width of one dot so it always ends in no-dot. Make the first td `width:40px` and you'll see what I mean. – Bazzz Aug 04 '11 at 12:59
-
@Bazzz i applied width to 40px, but i don't see any change. – varunvs Aug 04 '11 at 13:46
-
@varunvs, See http://stackoverflow.com/q/6250394/632951 – Pacerier Feb 27 '15 at 07:17
1 Answers
9
You can set horizontal border-spacing to even number of pixels between cells and between border's dots.
For example: http://jsfiddle.net/Gmhuw/
You can't "fix" it by modifying your table's style, these dots are interpreted that way by Chrome. That's just the browser's limiation.
biphobe
- 4,525
- 3
- 35
- 46
-
-
-
This works relatively well, however if you also have a background colour per row, then these are pulled apart per cell, leaving a clear gap in between. – Smithee Mar 11 '21 at 11:00