Home/ Questions/Q 8954675
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T14:21:43+00:00

I have an issue with HTML/CSS rendering in Outlook 2010. The below HTML renders

  • 0

I have an issue with HTML/CSS rendering in Outlook 2010.

The below HTML renders correctly in all other email clients I have tested (Thunderbird, Outlook 2003, iPhone, various webmail based products), and in various browsers too. But in Outlook 2010 I get a border around the table caption that is the same colour as the background for the tag below it.

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>

Can anyone suggest a fix for this issue?

EDIT

If you want to debug this you can save the HTML in a file and load it into Word 2010 as it uses the same rendering engine.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <!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>
    • 0