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

This works if I add inline styles to the HTML and get rid of the class names.

http://jsfiddle.net/jasongennaro/xWSKD/1/

EDIT

This also works if I add the styles to the css with an !important declaration

.dottedRight{border-right:2px dotted black !important;}

.dottedBottom{border-bottom:2px dotted black !important;}

http://jsfiddle.net/jasongennaro/xWSKD/2/

Note

The fiddles show the dotted line as red only to point out the change. See above code for correct use.

Also, see the comment below re implications of using !important ( What are the implications of using "!important" in CSS? )