<th> 배경, 잘못 테이블 캡션

주위 테두리로 나는 아웃룩 2010<th> 배경, 잘못 테이블 캡션

아래의 HTML 내가 (썬더 버드, 아웃룩 2003, 아이폰을 테스트 한 다른 이메일 클라이언트에서 제대로 렌더링에 HTML/CSS 렌더링 문제를 보여줍니다 다양한 웹 메일 기반 제품), 다양한 브라우저에서 사용할 수 있습니다. 그러나 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

<th> 배경, 잘못 테이블 캡션

답변

관련 문제