Issue with applying dotted border to cells in table design

Question

Here's my fiddle:

http://jsfiddle.net/gFA4p/84/

In this screenshot, the green lines represent where I'm trying to apply dotted lines.

I am able to get the left-right borders to appear as dotted lines, but not the bottom borders.

How can I resolve this?

Answer 1

The issue you're seeing is due to the rules of conflict resolution when it comes to border collapse. Solid takes precedence over dotted:

http://lachy.id.au/dev/css/tests/bordercollapse/bordercollapse.html

I believe you will need to make the conflicting borders dotted as well. So if you went a cell's left border to be dotted, you'll need to make the right border of the cell to its left also dotted (or anything of lower precedence, but dotted make the most sense).