html - CSS:表头看起来比表体小

我有一张桌子，分为桌面和桌面。为了使桌子看起来更漂亮一些，桌面有一个两部分的背景图像，使其圆角。桌面没有边框。
表体没有边框。因此，它似乎有点突出，超出了桌子头的左右。
我想使表头（没有边框）与表体（有边框）的大小相同。有什么办法可以做到这一点吗？
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>

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

最佳答案

为thead（如果可以的话）分配一个与包装的主背景相匹配的边框，很可能是白色的？

tbody {
    border: 2px solid transparent;
}

编辑：我忘了你可以设置透明边框。如果这在IE中有效，请继续。

关于html - CSS:表头看起来比表体小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3283437/