CSS: Table head looks smaller than table body - html

Question

I have a table divided into a table head and table body. In order to make the table look a little nicer, the table head has a 2 part background image that gives it rounded corners. The table head does NOT have a border.
The table body does have a border. Therefore, it appears to stick out a little bit beyond the table head on the right and the left.
I want to make the table head (without a border) the same size as the table body (with a border). Any ideas as to how to accomplish this?
The 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>
The 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

Assign a border to thead ( if you can ) that matches the main bg of your wrapper, most likely white?
tbody {
border: 2px solid transparent;
}
Edit: I forgot you could set a transparent border. If that works in IE, go ahead.