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.

Answer 1

Ok, this answer is partially devised from the information provided in the previous answers, but simply adding !important, or making both left- and right- borders dotted of adjacent cells is not enough.

First, the rendering mechanism between various browsers is not the same. This fiddle shows two lines over the total height of 4 rows in IE, FF and Opera. But Chrome and SafariWin shorten the left line to only one row.

To compensate for this, I added an extra dummy column, which proved also very usefull to eliminate most of the classes in the HTML.

Secondly, the base css style now only gives a left- and bottom-border to the cells. As a result, the last cells got a lastCol style, because IE7 does not add borders to the tr tag.

Here is the revised fiddle, tested with IE7, IE8, IE9, FF, Opera, SafariWin and Chrome.

Edit:

If you réally don't want the dummy column, I've managed it to get this far, but that solution does not work in Chrome or SafariWin. (Something strange is going on. Maybe someone else can explain.)