CODEWITHSUNDEEP
htmlcssbordercss-tables
keruilin
keruilin

Reputation: 17512

Issue with applying dotted border to cells in table design

Here's my fiddle:

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

In this screenshot, the green lines represent where I'm trying to apply dotted lines.

enter image description here

I am able to get the left-right borders to appear as dotted lines, but not the bottom borders.

How can I resolve this?

Upvotes: 8

Views: 10225

Answers (9)

Steve Robbins
Steve Robbins

Reputation: 13812

Here is my fiddle:

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

enter image description here

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.

Upvotes: 1

Luc125
Luc125

Reputation: 5857

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.

Upvotes: 6

Ярослав Рахматуллин
Ярослав Рахматуллин

Reputation: 7922

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:

$(td[class*="greenBorder"]).addClass("green_borders");
$(td[class*="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: 

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

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34855

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

http://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;}

http://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? )

Upvotes: 0

NGLN
NGLN

Reputation: 43659

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

Upvotes: 1

RRStoyanov
RRStoyanov

Reputation: 1172

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

Upvotes: -1

iHaveacomputer
iHaveacomputer

Reputation: 1437

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

Upvotes: 0

AR.
AR.

Reputation: 1955

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

Upvotes: 0

James Montagne
James Montagne

Reputation: 78650

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

Upvotes: 6

Related Questions