我之前在这个问题上提出了一个问题，你们给出了很棒的答案。后来我发现了上下文样式的醉人力量（http://www.w3.org/TR/css3-selectors/#selectors）——再次感谢大家——我现在已经沉迷其中。
我已经在我的当前设计中成功应用上下文样式，并取得了良好的进展：
http://jsfiddle.net/gFA4p/200/
但是我遇到了一些问题。
以下是我想要实现的屏幕截图:
首先，我试图应用上下文规则并让其变得比必要的更加困难，这是否有些过分呢？
如果不是，第二个问题是，我需要怎么做才能实现目标样式，如屏幕截图所示？
第三个问题是，如何使它跨浏览器兼容？即使是现在，它在其他浏览器中看起来很奇怪。
我认为如果不在HTML中适当使用TR和TD标签的类，您将无法完成此操作。在此fiddle中，我已将first类添加到每个第一行TR上，将last类添加到每个最后一行TR上，并将dotted类添加到应该是点状的单元格中。然后，通过以下附加样式，我可以显示您想要的内容。
.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;}
只要使用CSS选择器可以使您的HTML代码和样式表更简单、更易于理解和修改，就不会过度热衷；
例如，在您的HTML中使用较少的className属性。
此外，这也是学习它们的最佳方式！
对于您问题的第二部分，我建议您使用这个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;
}这个解决方案的好处是完全不需要修改你的HTML代码。
但是，如果浏览器（如IE8）不支持CSS3的:nth-child或:not伪类选择器，则必须添加虚线边框的边框将保持实心。
如果您更喜欢仅依赖CSS2的某些内容，请告诉我。
但在这种情况下，必要时要么向每个需要虚线边框的单元格添加一个class属性，
要么拆分每个具有7个单元格的行，以使每个“vlah”单元格成为其行的第一个子元素。