How to add vertical scrollbar in html email for outlook?-CodePudding

I'm creating an email template with a table nested in a div that should have a vertical scrollbar. It works for Gmail but doesn't work for Outlook. I'm aware Outlook doesn't support a lot of CSS styling - is there a better approach that is compatible for Outlook?

<div style="height:100px;overflow:auto;">
   <table style="width:500px">
     <tr>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
     </tr>
   </table>
</div>

CodePudding user response：

The following css property is not supported in desktop editions of Outlook:

overflow:auto

The fact is that Outlook uses Word as an email editor which applies its own rules for supported elements. You can find supported and unsupported HTML elements, attributes, and cascading style sheets properties described in the Word HTML and CSS Rendering Capabilities in Outlook article.

CodePudding user response：

Due to Outlook's severe restrictions, https://www.caniemail.com/clients/outlook/#windows, I can only think of a couple of things that may or may not work.

You could replicate the effect in an animated GIF. This is obviously sub-par, but if you have to do it, it's one way forward. Outlook desktop used to not support animated GIFs, but now they will play 3 times and then pause, after which the user can click them to make them play again (this time, infinitely).

To not kill the effect on other email platforms, you can wrap this in conditional code for Outlook:

<!--[if mso]>
  <img src="animatedgif.gif" width="x" height="y" alt="xyz">
<![endif]-->
<!--[if !mso]><!-->
    <div...>
    ...
    </div>
<!--<![endif]-->

Otherwise, it's not uncommon to link off to a landing page for more complex tables, or have a link on top of the image representation. You may like to, in that case, use the attribute title to indicate the purpose of the link: <a href="landingpageOrFullSizeImage.com" title="Click or tap to see this with full table features"><img ...></a>