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

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

Here is my fiddle:

http://jsfiddle.net/gFA4p/109/

All I did was add

.dottedBottomBorder {
    border-top: none !important;
} 

.dottedRightBorder + .dottedBottomBorder {
    border-top: 1px solid black !important;
}  

to the bottom of the style sheet, as well as add the dottedBottomBorder class the four cells on the right side of each pick column.

The problem you have is the bottom cell's solid border is overlapping the top cell's dotted border. This alleviates that.

Answer 4

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

Answer 5

.geniusPicks table tr.pickConsensusBody td {border:1px solid; background:grey;}

This is your problem. I would think you should assign separate classes to table cells instead of general assignments a la tr>td Maybe there's a way with less hassle though, not sure. But basically that line overrides your dotted style.

Answer 6

looks like it's overwriting or ignoring your dotted borders in td. because you set the borders to solid here:

.geniusPicks table tr.pickConsensusBody td {
    background: none repeat scroll 0 0 grey;
    border: 1px solid;
}

edit: someone beat my by ~20 seconds here...