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:

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.

Answer 1

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;}