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

Here is a solution:

1. If you do not specify the four borders for each cell, but only the left and bottom borders, you will avoid border conflicts:

   .geniusPicks table tr.pickConsensusBody td {
       border-left: solid 1px black;
       border-bottom: solid 1px black;
       background: grey;
   }
   .geniusPicks table tr.pickBody td {
       border-left: solid 1px black;
       border-bottom: solid 1px black;
   }
   

2. Then, to make the dotted borders in the fourth column you just have to apply your dottedLeftBorder and dottedBottomBorder classes to its cells (but only the dottedLeftBorder class for the last cell).

Now here is the corresponding fiddle: http://jsfiddle.net/Fvds5/3/, where every cell in the fourth column has now left and bottom dotted 1px black borders, except the last one that has no dotted bottom border.