CSS：表頭看起來比表體小

我有一個表分爲表頭和表體。爲了使桌子看起來更漂亮一些，桌子頭部有一個2部分的背景圖片，可以讓它看起來更圓潤。表頭沒有邊框。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; 
}

來源

2010-07-19 dmr

給我們更多的代碼！ css-excerpt會很好... http://jsfiddle.net/上的演示也是一個選項:) – 2010-07-19 17:52:47

分配邊界thead（如果你能），你的包裝主要BG匹配，最有可能的白色？

tbody { 
    border: 2px solid transparent; 
}

編輯：我忘了你可以設置一個透明的邊框。如果這在IE中有效，請繼續。

來源

2010-07-19 17:52:52

至少IE6不支持透明邊框。 – casablanca 2010-07-19 18:11:43

向thead添加任何類型的邊框都無濟於事。桌面仍然看起來比桌子小。 – dmr 2010-07-21 18:21:25

...你有一個現場的例子嗎？ – 2010-07-21 19:17:18

CSS：表頭看起來比表體小

回答

相關問題