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.