在表格上使用上下文样式，将虚线边框应用于特定单元格 [英] Using contextual styling on table to apply dotted borders to specific cells

问题描述

我以前曾）：

  .geniusPicks {} 
 
 .geniusPicks table {width：100％; font-size：12px; border-collapse：separate;} 
 
 .geniusPicks表tr＃picksHeading {border：0px solid; height：30px;} 
 
 .geniusPicks表tr＃picksHeading th {background：darkRed;颜色：白色; font-weight：bold;} 
 
 .geniusPicks表tr.pickHeading {border：0px solid;} 
 
 .geniusPicks表tr.pickHeading td {background：red; padding-left：10px;} 
 
 .geniusPicks表tr.pickHeading + tr td：last-child {border-right：solid 1px black;} 
 
 .geniusPicks表tr .pickConsensusBody td {
 border-left：1px solid; 
 border-top：1px solid; 
 background：gray; 
} 
 
 .geniusPicks表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表格，
 .geniusPicks表格：last-child，
 .geniusPicks表格.pickHeading + tr td，
 .geniusPicks表.pickHeading + tr td：last-child {text-align：center;} 
 
 
 .geniusPicks表th + th + th，
 .geniusPicks表.pickHeading + tr td + td + td {text-align：left;} 
 
 / *边框左半径* / 
 .geniusPicks表thead tr＃picksHeading th：first-child，。 geniusPicks表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表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表.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表tr.pickConsensusBody td：first-child：not（[rowspan]），
 .geniusPicks表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; 
}  

这个解决方案的好处是它不需要修改你的HTML代码。

但是，如果浏览器（例如IE8）不支持CSS3 ：nth-​​child 或：not 伪类。

告诉我，在CSS2。
但是在这种情况下，需要为每个必须被加点的单元格添加一个 class 属性，或者将每一行有7个单元格，使每个vlah单元格成为其行的第一个孩子。

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.

解决方案

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.

这篇关于在表格上使用上下文样式，将虚线边框应用于特定单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！