Can't use "display: table" in Outlook after using "display: none" on table

user_4017749 0
Viewed 517

Consider the below HTML email. It has a banner at the top which is hidden via the CSS rule table {display: none !important;}. It is then shown again via the more specific CSS rule body table {display: table !important;}. This is working as expected in all browsers, including Internet Explorer 11. However, in Outlook, the second CSS rule does not seem to have any effect. Strangely, just the content is hidden in Outlook rather than the whole table. But the content is not shown again using the second rule.

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
    <style>
      table {
        display: none !important;
      }
    </style>
    <style>
      body table {
        display: table !important;
      }
    </style>
  </head>
  <body>
    <table border="0" cellspacing="0" cellpadding="0" width="100%" style="cellpadding: 0;border: 0;cellspacing: 0;display: table;width: 100%;table-layout: fixed;border-collapse: seperate;float: none;" align="left">
      <tbody>
        <tr>
          <td valign="middle" width="1px" bgcolor="#A6A6A6" cellpadding="7px 2px 7px 2px" style="padding: 7px 2px 7px 2px;background-color: #a6a6a6;valign: middle;"></td>
          <td valign="middle" width="100%" bgcolor="#EAEAEA" cellpadding="7px 5px 7px 15px" color="#212121" style="width: 100%;background-color: #eaeaea;padding: 7px 5px 7px 15px;font-family: wf_segoe-ui_normal, Segoe UI, Segoe WP, Tahoma, Arial,sans-serif;font-size: 12px;font-weight: normal;color: #212121;text-align: left;word-wrap: break-word;">
            <div>This table should be visible.</div>
          </td>
          <td valign="middle" align="left" width="75px" bgcolor="#EAEAEA" cellpadding="7px 5px 7px 5px" color="#212121" style="width: 75px;background-color: #eaeaea;padding: 7px 5px 7px 5px;font-family: wf_segoe-ui_normal, Segoe UI, Segoe WP, Tahoma, Arial,sans-serif;font-size: 12px;font-weight: normal;color: #212121;text-align: left;word-wrap: break-word;align: left;"></td>
        </tr>
      </tbody>
    </table>
    <div>This is a test</div>
  </body>
</html>

Removing !important from either or both rules has no effect. How can I override the initial display: none and make the banner visible again?

For context if it helps, these banners are inserted by Office 365 for things like warning users when a message looks like phishing. One issue is that phishing messages can hide these banners with a few lines of CSS. I am trying to write CSS to append to the end of the message which will make the banner visible again. This approach works in OWA and Outlook for iOS, but not Outlook for Windows.

The issue is also explained in this tweet.

outlook css
3 Answers

I doubt if this works in outlook display. display: table !important;

if you just keep this line and remove does it work. Anyway you are already using table html. so try using

display: block !important;

instead of

display: table !important;

i think table was for divs to display as table. but outlook does not support it

Admin1

You are using both, the style element (<style>) and inline style (style="...")

So you need to know that there could be a conflict... As far as I know, Outlook works better with inline styles,

so try to choose only this one and work with it, if this is an option. Otherwise you will need to update both.

user_32815220

When using CSS in email it is preferable to use Inline CSS. Avoid embedded and external CSS in HTML emails. Because browser-based email applications, such as Gmail, strip out <head> > and <body> tags by default, always use inline CSS over embedded CSS.

General CSS tips and troubleshooting

CSS in HTML emails

user_87958840
Related