Question

我有一张桌子分为桌头和桌子。为了使桌子看起来更好一点，桌面有一个2部分的背景图像，给它圆角。桌头没有边框。

桌子主体有边框。因此，它似乎比右侧和左侧的桌头伸出一点点。

我想使表头（没有边框）与表体（带边框）的大小相同。有关如何实现这一点的任何想法？

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

Answer 1

为thead（，如果你可以）指定一个与你的包装主bg相匹配的边框，很可能是白色的？

tbody {
    border: 2px solid transparent;
}

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

CSS：表头看起来比表体小

1 个答案: