Using contextual styling on table to apply dotted borders to specific cells

Question

I had previously asked a question on this issue, to which you guys supplied fantastic answers. I since "discovered" the intoxicating power of contextual styling (http://www.w3.org/TR/css3-selectors/#selectors) -- thanks once again to you all -- and now I am hooked.

I've made good progress on applying contextual styling to my current design here:

http://jsfiddle.net/gFA4p/200/

I've run into a few issues, though.

Here's a screenshot of what I'm trying to do:

enter image description here

My first question, am I being overzealous in trying to apply contextual rules and making it harder than it needs to be?

Two, if not, what do I need to do to accomplish my target styling, per the screenshot?

Three, how to make this cross-browser compatible? Even as-is, it looks wonky in other browsers.

score 1 · Answer 1 · answered Jun 25 '11 at 03:23

I don't think you'll be able to accomplish this without putting some classes on appropriate TR and TD tags in your HTML. In this fiddle I've added the class of first to each first-row TR, the class of last to each last-row TR, and the class of dotted to the cells that should be dotted. Then, with the following additional styles I'm able to show what you're after.

.geniusPicks table td.dotted {border: 1px dotted black !important;}
.geniusPicks table tr.first td.dotted {border-top: none !important;}
.geniusPicks table tr.last td.dotted {border-bottom-style: solid !important;}
.geniusPicks table tr.pickBody.first td.dotted {border-top: 1px solid black !important;}

score 0 · Accepted Answer · answered Jun 27 '11 at 16:46

Using CSS selectors is not overzealous as long as it allows your HTML code and style sheets to be simpler, easier to understand and modify; for example, with less className attributes in your HTML.
Furthermore, it is the best way to learn them!

For the second part of your question, I suggest you this CSS ( http://jsfiddle.net/S8Bne/ ) :

.geniusPicks {}

.geniusPicks table {width:100%; font-size:12px; border-collapse:separate;}

.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.pickHeading+tr td:last-child {border-right:solid 1px black;}

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

.geniusPicks table tr.pickBody td {
    border-left:1px solid;
    border-top:1px solid;
}

.bigGap td {height:19px;}

.smallGap td {height:10px; border-top:solid 1px black;}

.geniusPicks table th,
.geniusPicks table th:last-child,
.geniusPicks table .pickHeading+tr td,
.geniusPicks table .pickHeading+tr td:last-child {text-align:center;}


.geniusPicks table th+th+th, 
.geniusPicks table .pickHeading+tr td+td+td {text-align:left;}

/* Border Left Radius */
.geniusPicks table thead tr#picksHeading th:first-child, .geniusPicks table tr.pickHeading td {
    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;
}

/* Border Right Radius */
.geniusPicks table thead tr#picksHeading th:last-child {
    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;
}


.geniusPicks table .pickHeading+tr td:nth-child(4) {
    border-left-style:dotted;
    border-left-color:black;
    border-left-width:1px;
    border-top-style:solid;
    border-top-color:black;
    border-top-width:1px;
}

.geniusPicks table tr.pickConsensusBody td:first-child:not([rowspan]),
.geniusPicks table tr.pickBody td:first-child:not([rowspan]) {
    border-top-style:dotted;
    border-top-color:black;
    border-top-width:1px;
    border-left-style:dotted;
    border-left-color:black;
    border-left-width:1px;
}

The nice thing with this solution is that it does not require to modify your HTML code at all.

However, the borders that must be dotted will remain solid if the browser (e.g. IE8) does not support the CSS3 :nth-child or :not pseudo-class.

Tell me if you would prefer something that relies only on CSS2. But in that case it will be necessary either to add a class attribute to every cell that has to be dotted, or to split every row that has 7 cells so that every "vlah" cell becomes the first child of its row.

score 0 · Answer 3 · answered Jun 30 '11 at 20:49

In answer to your first question, yes I think you are being overzealous. Instead of worrying about dotted or solid borders why not spend the time making the content more usable & readable.

The current styling (color & solid black borders) in your example overwhelms the actual content. Some resources:

the final design should be more attractive! the content actually dictates this type of structural presentation...thanks for the links — keruilin, Jul 04 '11 at 06:50

Using contextual styling on table to apply dotted borders to specific cells

3 Answers3

Linked