How to draw outside borders only in thead

Here is a jsfiddle of my html/css: ht开发者_Go百科tp://jsfiddle.net/S8Bne/49/

In the the top header, as you can see, there are solid black borders around each th.

I only want to draw a border around the outside of the th group. How can I accomplish this?

Here's one way using :first-child and :last-child pseudo selectors

.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

The issue was with the line: .geniusPicks table tr#picksHeading th, specifically with the style { border:1px solid #000; } which makes a border for all four sides. To set a border on top and bottom, but not left and right, you need to specifiy each border individually using its longhand version: border-*position*

Update your code as follows:

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