4

I've set up a [jsfiddle][1] with my test case.

Basically, I have a table with a dotted border on the bottom of some cells and a solid border on others. For some reason, the dotted borders are turning to solid ones on some cells, I can't figure out why. Could anybody explain this behaviour and/or provide a fix for it?

I'm using Chrome.

[1]: http://jsfiddle.net/eZcSR/1/

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Tim Rodham
  • 283
  • 4
  • 14
  • Exactly where the dooted turns to solid? - http://jsfiddle.net/eZcSR/27/ – Jawad May 31 '12 at 16:08
  • on my version it would have been Row-1 Cell-2 and Row-1 Cell-4 but in yours they are not - but it doesn't look like you changed anything apart from the text? why does it happen in my version then? – Tim Rodham May 31 '12 at 16:15
  • which OS you have? DOes it happend only in Chrome? – Jawad May 31 '12 at 16:19
  • I'm on windows 7, works as expected in FF and IE - so just chrome by the looks ok it – Tim Rodham May 31 '12 at 16:23
  • Your CSS is now missing from jsfiddle. I played with it a bunch and I see the issue in Chrome on OS X. I think it may be a browser issue. I did notice if you switch to CSS tables the issue goes away. I was going to check it in Chrome on Windows but now your CSS is missing... – user1337 May 31 '12 at 16:24
  • my CSS is still there, click the original link – Tim Rodham May 31 '12 at 16:26
  • this may be related to http://stackoverflow.com/questions/6941640/css-dotted-border-issue-in-adjacent-columns-in-a-table-rendered-as-dash-in-chrom ? – Tim Rodham May 31 '12 at 16:26
  • Strange, your CSS was gone when I checked it in ~5 browsers on two machines. This issue also only occurs with dotted - eg not dashed. When I resize the browser window, the area that's solid can change. I think @TimRodham is right with his suggestion on a related issue. – user1337 May 31 '12 at 16:32
  • the problem seems to be reliant on the colspan attribute of the cells underneath - and not upon the other solid bordered cells – Tim Rodham May 31 '12 at 16:37
  • btw - the CSS is probably gone because you are on the wrong version? try version 1 as in the original link – Tim Rodham May 31 '12 at 16:39

1 Answers1

-1

Adding

border-collapse: separate;

Or adding border-spacing: 0

Or adding an empty <tr></tr> to the row above (??!)

Fixes the issue as in this question: Double dotted border while using colspan

Community
  • 1
  • 1
Tim Rodham
  • 283
  • 4
  • 14