Problem applying dashed border to cells in table design

Question

Here is my fiddle:

http://jsfiddle.net/gFA4p/84/

In this screenshot, green lines indicate where I am trying to apply the dashed lines.

I can get left and right borders so that they appear as dashed lines, but not lower borders.

How can i solve this?

Answer 1

The problem you see is related to conflict resolution rules when it comes to border collapse. Hardness takes precedence over the dotted line:

http://lachy.id.au/dev/css/tests/bordercollapse/bordercollapse.html

I believe that you will also need to share conflicting boundaries. Therefore, if you placed the left border of the cell to be dashed, you will need to make the right border of the cell to the left of it also dashed (or something lower in priority, but dashed has the greatest value).

Answer 2

Here is the solution:

• If you do not specify four borders for each cell, but only the left and bottom borders, you 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 need to apply your dottedLeftBorder and dottedBottomBorder to your cells (but only to the dottedLeftBorder class for the last cell).

Now here is the corresponding fiddle: http://jsfiddle.net/Fvds5/3/ , where each cell in the fourth column now has left and bottom points with 1px black borders, except for the last one, which does not have a dot bottom border.

Answer 3

Well, this answer is partially developed from the information provided in previous answers, but just adding !important or making both the left and right borders dotted with neighboring cells is not enough.

Firstly, the rendering mechanism between different browsers does not match. This script shows two lines at a total height of 4 lines in IE, FF and Opera. But Chrome and SafariWin reduce the left line to only one line.

To compensate for this, I added an additional dummy column, which is also very useful for eliminating most classes in HTML.

Secondly, the basic css style now only provides cells on the left and bottom. As a result, the last cells got the lastCol style, since IE7 does not add borders to the tr tag.

Here is a fixed script tested with IE7, IE8, IE9, FF, Opera, SafariWin and Chrome.

Edit:

If you don't need a dummy column, I managed to get it so far , but this solution does not work in Chrome or SafariWin. (Something strange is happening. Maybe someone else can explain.)

Answer 4

Here is my fiddle:

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

All I did is add

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

at the bottom of the stylesheet, and add the dottedBottomBorder class to the four cells on the right side of each selection column.

The problem you have is the solid border of the bottom cell that overlaps the top border of the cell. It makes it easier.

Answer 5

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

It's your problem. I would think that you should assign separate classes to table cells instead of general purpose a la tr> td Maybe there is a way with less troubles, although I'm not sure. But basically this line redefines your dot style.

Answer 6

looks like rewriting or ignoring your dotted borders in td. because here you set the boundaries:

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

edit: someone beat me for ~ 20 seconds here ...

Answer 7

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

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

EDIT

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

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

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

Note

The screenshots show a dashed line as red just to indicate a change. See above code for proper use.

Also see the comment below. Consequences of using !important ( What are the consequences of using “important” in CSS? )

Answer 8

With jQuery you can:

• find all items in wanna-have-geen-border column
• give them all dotted green left
• give them all the exact lower green border
  • use: last to remove unwanted bottom border from last element

You can find all the rows in this column by doing something like:

 $(td[class*="greenBorder"]).addClass("green_borders"); $(td[class*="greenBorder"]).last().css('border-bottom','') 

Note that I'm saying something like that because they are not very good with jQuery and do not have the correct syntax / understanding of how the selector is used. But I saw examples where similar things are done. You can find tons of examples of this site or read the source documentation (which is inadequate, imho).

Ok, I did this:

  <!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title>Green Border</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <style type="text/css"> .geniusPicks {} .geniusPicks table {width:100%; font-size:12px;} .geniusPicks table tr#picksHeading {border:0px solid; height:30px;} .geniusPicks table tr#picksHeading th {background:darkRed; color:white; font-weight:bold;} .geniusPicks table tr.pickHeading {border:0px solid;} .geniusPicks table tr.pickHeading td {background:red; padding-left:10px;} .geniusPicks table tr.pickConsensusBody td {border:1px solid; background:grey;} .geniusPicks table tr.pickBody td {border:1px solid;} .bigGap td {height:19px;} .smallGap td {height:10px;} .geniusPicks table th, .geniusPicks table th+th+th+th+th+th, .geniusPicks table .pickHeading+tr td, .geniusPicks table .pickHeading+tr td+td+td+td+td+td+td {text-align:center;} .geniusPicks table th+th+th, .geniusPicks table .pickHeading+tr td+td+td {text-align:left;} .borderLeftRadius { border-radius:15px 0 0 0; -moz-border-radius:15px 0 0 0; -webkit-border-radius:15px 0 0 0; -khtml-border-radius:15px 0 0 0; } .borderRightRadius { border-radius:0 15px 0 0; -moz-border-radius:0 15px 0 0; -webkit-border-radius:0 15px 0 0; -khtml-border-radius:0 15px 0 0; } </style> <script type="text/javascript"> $(document).ready(function() { var green = jQuery("td[name='green']"); green.each(function(){ var cl = $(this).attr('class'); var prev = $(this).prev(); $(this) .css('border-color','#aeaeae') .css('border-style','dotted') .css('border-right-style','solid') .css('border-right-color','black') .addClass(function(i,currentClass){ return "dotted"; }); if (prev.attr('class') == "dottedRightBorder") { prev.css('border-right-style','dotted') .css('border-right-color','#aeaeae') } if (cl=="top") { $(this) .css('border-top-style','solid') .css('border-top-color','black') } else if (cl=="bottom"){ $(this) .css('border-bottom-style','solid') .css('border-bottom-color','black') } }); }); </script> </head> <body> <div class="geniusPicks"> <table cellpadding="1" cellspacing="0"> <thead> <tr id="picksHeading"> <th class="borderLeftRadius">Sport</th> <th>Status</th> <th colspan="2">Pick</th> <th>Genius</th> <th>Genius Credential</th> <th class="borderRightRadius">Result</th> </tr> </thead> <tbody> <tr class="bigGap"> <td colspan="7"></td> </tr> <tr class="pickHeading"> <td colspan="7" class="borderLeftRadius">blah</td> </tr> <tr class="pickConsensusBody"> <td rowspan="4">moo</td> <td rowspan="4">flah</td> <td rowspan="4" class="dottedRightBorder">glah</td> <td name="green" class="top">vlah</td> <td>mlah</td> <td>nlah</td> <td rowspan="4">jlah</td> </tr> <tr class="pickConsensusBody"> <td name="green" >clah</td> <td>dlah</td> <td>xlah</td> </tr> <tr class="pickConsensusBody"> <td name="green" >plah</td> <td>slah</td> <td>klah</td> </tr> <tr class="pickConsensusBody"> <td name="green" class="bottom">qlah</td> <td>wlah</td> <td>zlah</td> </tr> <tr class="smallGap"> <td colspan="7"></td> </tr> <tr class="pickHeading"> <td colspan="7" class="borderLeftRadius">blah</td> </tr> <tr class="pickBody"> <td rowspan="4">moo</td> <td rowspan="4">flah</td> <td rowspan="4" class="dottedRightBorder">glah</td> <td name="green" class="top">vlah</td> <td>mlah</td> <td>nlah</td> <td rowspan="4">jlah</td> </tr> <tr class="pickBody"> <td name="green" >clah</td> <td>dlah</td> <td>xlah</td> </tr> <tr class="pickBody"> <td name="green">plah</td> <td>slah</td> <td>klah</td> </tr> <tr class="pickBody"> <td name="green" class="bottom">qlah</td> <td>wlah</td> <td>zlah</td> </tr> <tr class="smallGap"> <td colspan="7"></td> </tr> </tbody> </table> </div> 

Answer 9

Here we go http://jsfiddle.net/gFA4p/86/