‹th› фон отображается неправильно в виде рамки вокруг заголовка таблицы

У меня проблема с рендерингом HTML/CSS в Outlook 2010.

Приведенный ниже HTML правильно отображается во всех других почтовых клиентах, которые я тестировал (Thunderbird, Outlook 2003, iPhone, различные продукты на основе веб-почты), а также в различных браузерах. Но в Outlook 2010 я получаю рамку вокруг заголовка таблицы того же цвета, что и фон тега под ним.

HTML-таблица с заголовком в 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, так как он использует тот же механизм рендеринга.


html css outlook-2010
person Mike Taylor    schedule 06.12.2012    source источник
comment
Уберите background: #FFF; из стиля тега подписи, и фон подписи будет серым, и это не будет выглядеть так, как будто есть граница.   -  person Magicmarkker    schedule 06.12.2012
comment
Но я хочу белый фон, а не серый   -  person Mike Taylor    schedule 06.12.2012
comment
попробуйте установить <table border=0> и удалить границу из стиля таблицы. Заголовки технически являются частью таблицы, поэтому к ней также будет применен стиль границы.   -  person Magicmarkker    schedule 06.12.2012
comment
Или даже border: none; внутри стиля для подписи   -  person Christian    schedule 06.12.2012
comment
border: none не исправит, а <table boarder=0> даже не правильный синтаксис.   -  person Mike Taylor    schedule 06.12.2012
comment
@ChristianVarga Я тоже пробовал, но безрезультатно. Я не думаю, что это проблема с границей, но, скорее всего, проблема с цветом фона из тега <th>   -  person Mike Taylor    schedule 06.12.2012
comment
это точно не фон и не бордюр? border: 0px solid #FFF;   -  person Jamie Hutber    schedule 06.12.2012
comment
@MikeT: Конечно, это не когда ты пишешь неправильно.   -  person BoltClock    schedule 06.12.2012
comment
@BoltClock моя ошибка, но я правильно написал ее в файле HTML, да благословит Бог код завершен.   -  person Mike Taylor    schedule 06.12.2012

Ответы (2)


arrow_upward
1
arrow_downward

Попробуйте добавить фантомную строку после <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>
person Kaizen Programmer    schedule 06.12.2012

arrow_upward

arrow_downward

person    schedule
comment
Для тех, кто все еще сталкивается с этим вопросом, этот помеченный ответ всегда был недопустимым HTML. Элемент ‹caption› действителен только непосредственно после открывающего тега ‹table›, даже в HTML 4.01. Спецификация HTML 4.01 HTML Living Standard - person sp00n; 18.12.2019