Question

这是我的html / css：http://jsfiddle.net/S8Bne/49/

的jsfiddle

在顶部标题中，如您所见，每个周围都有纯黑色边框。

我只想在第一组外面画一个边框。我怎么能做到这一点？

Answer 1

这是使用:first-child和:last-child伪选择器

的一种方法

.geniusPicks table tr#picksHeading th {background:darkRed; color:white; font-weight:bold; border-top:solid 1px #000; border-bottom:solid 1px #000;}
.geniusPicks table tr#picksHeading th:first-child {border-left:solid 1px #000;}
.geniusPicks table tr#picksHeading th:last-child {border-right:solid 1px #000;}

jsfiddle

Answer 2

问题在于行.geniusPicks table tr#picksHeading th，特别是样式{ border:1px solid #000; }，它为所有四个边创建了边框。要在顶部和底部设置边框，而不是在左侧和右侧设置边框，您需要使用其缩写版本单独指定每个边框：border-*position*

按如下方式更新您的代码：

.geniusPicks table tr#picksHeading th { 
   background:darkRed;
   color:white;
   font-weight:bold;
   /* replace border:1px solid #000 with these four rules */
   border-top:1px solid #000;
   border-bottom:1px solid #000; 
   border-left:none; 
   border-right:none;
}

如何仅在thead中绘制外部边界

2 个答案: