Question

See this example:

http://jsfiddle.net/sM3hT/

A normal table styled as follows:

table {
 width:100%; 
 border-collapse:collapse;
}
td {
  border:1px dashed black;
  padding:5px;
}
th {
 background:orange;
}

You’ll notice that the border dashing is not spaced evenly, sometimes even appearing as a solid line. Is this something inherent to dashed borders?

I’ve also tried applying the dashed borders to the tr instead of td, thinking that these are all the same length so the spacing would be even, but that didn’t help either.

Is this something that cannot be changed?

Note: This is safari 6, it may work as advertised in other browsers.

I’ve included a screenshot of what it looks like at a certain width:

Answer 1

I’m afraid the problem is inherent to dashed borders of adjacent cells, or adjacent elements in general. The problem is that browsers do the dashing for each element’s border separately, so the dashes won’t generally be evenly spaced when seen considering e.g. the borders of cells of a row as one line.

The problem is probably best avoided by using e.g. a solid border of a lighter color instead, e.g. border: 1px solid gray.