Issue with applying dotted border to cells in table design?

The issue you're seeing is due to the rules of conflict resolution when it comes to border collapse. Solid takes precedence over dotted.

The issue you're seeing is due to the rules of conflict resolution when it comes to border collapse. Solid takes precedence over dotted: lachy.id.au/dev/css/tests/bordercollapse... 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).

Ahh, that makes perfect sense – keruilin Jun 13 '11 at 3:33 +1 Indeed, perfect sense. – NGLN Jun 15 '11 at 18:57 @keruilin, the same applies to the top/bottom borders. The same way you changed your fiddle to work with the left border works with the bottom.

If you need the bottom dotted then the cell below needs to have a dotted top border. See the bottom border of vlah in the first table jsfiddle.net/gFA4p/103 . I simply made the top border of clah dotted.

– James Montagne Jun 18 '11 at 2:35 Sweet link, demonstrates border conflict resolution very well – whoabackoff Jun 20 '11 at 18:24.

Here is a solution: 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; } 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: 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.

1 Nice, that does the trick. But a little confused. Isn't the separated borders model supposed to be the default?

– NGLN Jun 16 '11 at 17:33 @NGLN Yes, it's the default model; but after reading the previous answers and comments on this page I first thought the collapse border model was used in the question. – Luc125 Jun 17 '11 at 7:55 @NGLN @Luc, in the example the collapse is coming from the "Normalized CSS" that is checked off. The normalization css has border-collapse:collapse; – James Montagne Jun 18 '11 at 2:42 @kingjiv Aaah, thanks!

I will turn off that feature in future. – NGLN Jun 18 '11 at 8:30 I don't know if anyone else noticed this, but in Google Chrome, the 'plah' row has a solid border on the left, the other rows are fine though... It's really weird, if I highlight 'plah' from left to right, it goes away... Does anyone else experience this? – whoabackoff Jun 20 '11 at 18:14.

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

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

1 It ís the problem, partly. – NGLN Jun 15 '11 at 19:01.

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

1 But writing this post likely took somewhat longer. – NGLN Jun 15 '11 at 18:59.

This works if I add inline styles to the HTML and get rid of the class names. 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;} 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? ).

1 Both solutions don't work with 1px dotted black 2px takes precedence over 1px, just like solid over dotted. – NGLN Jun 15 '11 at 18:55 @NGLN thanks. Appreciate the distinction (but not the -1 ;-) However, OP never said it needed to be 1px.

As 2px dotted is very similar in size to 1px solid (see the fiddle above), this seems like a reasonable solution to me. – Jason Gennaro Jun 16 '11 at 15:39 Ok, if you edit your answer and change red into black, then I remove the downvote. But remind: What are the implications of using “!

Important” in CSS? – NGLN Jun 16 '11 at 15:58 @NGLN Done and thx – Jason Gennaro Jun 16 '11 at 16:07 Thanks @whoabackoff. That's why I added the note above: "The fiddles show the dotted line as red only to point out the change.

See above code for correct use. " – Jason Gennaro Jun 16 '11 at 20:19.

With jQuery, you can: find all elements in that wanna-have-geen-borders column give them all dotted green lef give them all dotted bottom green border use the :last to remove the undesired bottom border from the last element You can find all rows in that column by doing something like: $(tdclass*="greenBorder"). AddClass("green_borders"); $(tdclass*="greenBorder").last(). Css('border-bottom','') Note im saying something like because im not very good with jQuery and don't have the right syntax/grasp of how selectors are used.

But I've seen examples where similar things are done. You can find tonnes of examples of this site, or consult the original documentation (which is kinda bad, imho). Ok, I did it: Green Border Sport Status Pick Genius Genius Credential Result blah moo flah glah vlah mlah nlah jlah clah dlah xlah plah slah klah qlah wlah zlah blah moo flah glah vlah mlah nlah jlah clah dlah xlah plah slah klah qlah wlah zlah.

Here is my fiddle: 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.

1 Sorry, doesn't work. – NGLN Jun 15 '11 at 18:59.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.