<th>背景顯示不正確地圍繞表格標題

邊境我有Outlook 2010中的<th>背景顯示不正確地圍繞表格標題

以下HTML正確呈現在我測試（雷鳥，Outlook 2003中，iPhone上的所有其他電子郵件客戶端HTML/CSS渲染的問題，各種基於webmail的產品）以及各種瀏覽器。但在Outlook 2010中，我在表格標題周圍獲得與其下方標記背景顏色相同的邊框。

HTML table with caption in Outlook 2010

<!DOCTYPE html> 
<html> 
<body> 
    <div style="padding: 0.3em"> 
    <p>Here is a nice background from St Pancras Station with the Olympic Rings in the background</p> 
    <hr /> 

    <table style=" width: auto; color: #000; border: 1px solid #000; border-collapse: collapse; background: #FFF;"> 
     <caption style=" font-style: italic; text-align: left; color: #000; background: #FFF;">Files attached to this message</caption> 
     <tr> 
     <th style="border: 1px solid #000; padding: 0.3em; background: #ddd; text-align: left; vertical-align: top;">Filename</th> 
     <th style="border: 1px solid #000; padding: 0.3em; background: #ddd; text-align: left; vertical-align: top;">Size</th> 
     </tr> 

     <tr> 
     <td style="border: 1px solid #000; padding: 0.3em; text-align: left; vertical-align: top; width: 75%;">6315755363_7fbe95fc66_o.jpg</td> 
     <td style="border: 1px solid #000; padding: 0.3em; text-align: left; vertical-align: top; width: 25%;">5 MB</td> 
     </tr> 

    </table> 

    <p>Please <a href="https://********/message/Hreh4oqPUR9ctdJ59Nkm4N">click here</a> to download the attachments.</p> 

    <p>The attachments are available until: <b>Tuesday, 11 December.</b></p> 
    <hr /> 
    </div> 


</body> 
</html>

任何人都可以提出針對此問題的解決？

編輯

如果你想調試這個你可以保存在一個文件中的HTML，並將其加載到Word 2010，因爲它使用相同的渲染引擎。

來源

2012-12-06 MikeT

採取'背景：#FFF;'把你的標題標籤的風格和字幕的BG將是灰色的，它不會像有一個邊界。 – Magicmarkker

但我想要一個不是灰色的白色背景 – MikeT

嘗試設置'

'並從表格樣式中刪除邊框。字幕在技術上是表格的一部分，因此邊框樣式也將應用於它。 – Magicmarkker

回答

<!DOCTYPE html> 
<html> 
<body> 
    <div style="padding: 0.3em"> 
    <p>Here is a nice background from St Pancras Station with the Olympic Rings in the background</p> 
    <hr /> 
    <table style=" width: auto; color: #000; border-collapse: collapse;"> 
     <tr> 
      <td style="border: 1px solid #fff; border-bottom-color: #000; background: #fff; text-align: left; vertical-align: top;"> 
       <caption style=" font-style: italic; text-align: left; color: #000;">Files attached to this message</caption> 
      </td> 
     </tr> 
     <tr> 
     <th style="border: 1px solid #000; padding: 0.3em; background: #ddd; text-align: left; vertical-align: top;">Filename</th> 
     <th style="border: 1px solid #000; padding: 0.3em; background: #ddd; text-align: left; vertical-align: top;">Size</th> 
     </tr> 

     <tr> 
     <td style="border: 1px solid #000; padding: 0.3em; text-align: left; vertical-align: top; width: 75%;background: #FFF;">6315755363_7fbe95fc66_o.jpg</td> 
     <td style="border: 1px solid #000; padding: 0.3em; text-align: left; vertical-align: top; width: 25%;background: #FFF;">5 MB</td> 
     </tr> 

    </table> 

    <p>Please <a href="https://********/message/Hreh4oqPUR9ctdJ59Nkm4N">click here</a> to download the attachments.</p> 

    <p>The attachments are available until: <b>Tuesday, 11 December.</b></p> 
    <hr /> 
    </div> 
</body> 
</html>

來源

2012-12-06 17:07:58

嘗試增加幻像行後<caption>

<caption style=" font-style: italic; text-align: left; color: #000; background: #FFF;">Files attached to this message</caption> 
<tr style="background:#FFF; display:none;"></tr> <!--phantom row--> 
<tr> 
    <th style="border: 1px solid #000; padding: 0.3em; background: #ddd; text-align: left; vertical-align: top;">Filename</th> 
    <th style="border: 1px solid #000; padding: 0.3em; background: #ddd; text-align: left; vertical-align: top;">Size</th> 
</tr>

來源

2012-12-06 17:12:38

相關問題