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).

Answer 2

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.

Answer 3

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.)