CSS: La tête de table semble plus petite que le corps de la table

Question

J'ai une table divisée en une tête de table et un corps de table. Afin de rendre la table un peu plus belle, la tête de table a une image de fond en 2 parties qui lui donne des coins arrondis. La tête de table n'a PAS de bordure.

Le corps de la table a une bordure. Par conséquent, il semble ressortir un peu au-delà de la tête de la table sur la droite et la gauche.

Je veux que la tête de table (sans bordure) ait la même taille que le corps de la table (avec une bordure). Des idées sur la façon d'accomplir cela?

Le code HTML:

<table id="outerTable"> 
     <!-- No border --> 
     <!-- Smaller than tbody on right and left --> 
     <thead> 
      <tr id="outerRow"> 
       <th id="titleTh">Table Title</th> 
      </tr> 
     </thead> 

     <!-- Has border --> 
     <tbody id="outerBody"> 
     </tbody> 
    </table> 

Le CSS:

#outerTable{ 
    margin: 0px auto 0px auto; 
    font-size: 12px; 
    background-color: white; 
    border-collapse: collapse; 
} 
#titleRow{ 
    background-image: url('/images/vinHead_r.png'); 
    background-repeat: no-repeat; 
    background-position: right top; 
    margin-top: 0px; 
} 
#titleTh 
{ 
    font-size: 16px; 
    background-image: url('/images/vinHead_l.png'); 
    background-repeat: no-repeat; 
    background-position: left top; 
    color: #EEEEEE; 
    padding:5px 5px 5px 20px; 
    text-align: center; 
    cursor: pointer; 
    margin-bottom: 0px; 
    margin-top: 0px; 
} 
#outerBody{ 
    border: 2px solid #666666; 
} 

Answer 1

Attribuer une bordure à thead (si vous le pouvez) qui correspond à la principale bg de votre emballage, blanc le plus probable?

tbody { 
    border: 2px solid transparent; 
} 

Editer: J'ai oublié que vous pouviez définir une bordure transparente. Si cela fonctionne dans IE, allez-y.