Cannot get the ghost table correct

Question

I have tried multiple times to sort out the "Ghost table" for this email template to render in Outlook mobile and online to no success. For some reason it misaligns when printing into Outlook.

Desired look:

What I am getting (both Outlook online and mobile):

Code (This version contains no ghost tables to make it easier):

<tr>
  <td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;">
    <table width="100%" style="border-spacing:0;" role="presentation">
      <tr>
        <td class="padding content" style="padding-top:0px;padding-right:25px;padding-bottom:5px;padding-left:25px;width:100%;text-align:left; font-size:20px;">
          <p style="font-size:23px; font-weight:bold;line-height: 30px;padding-bottom: 5px;">
            First 3 Things To Try</p>

          <table align="left" width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
            <tr>
              <td align="left">
                <table width="150" border="0" cellspacing="0" cellpadding="0" role="presentation">
                  <tr>

                    <!--[if (gte mso 9)|(IE)]>
                                            <td style="padding-top:15px;padding-bottom:15px;">
                                        <![endif]-->
                    <td width="150" align="left" style="border-top:4px solid #4D5358;"></td>

                    <!--[if (gte mso 9)|(IE)]>
                                            </td>
                                        <![endif]-->
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>

        <td class="padding content" style="padding-top:0;padding-right:25px;padding-bottom:20px;padding-left:25px;width:100%;text-align:left;font-size:15px;">
          <table>
            <tr>
              <td width="80">
                <img src="https://i.ibb.co/nnb4qnY/user.png" width="50" height="50" alt="" style="border-width:0;width:100%;max-width:50px;max-height:50;padding-right:10px;">
              </td>
              <td width="370">
                <p style="font-size:18px;line-height: 23px;min-width:600px; display: inline;"><strong>Setup Your Profile Picture</strong></p>
              </td>
              <td width="150">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
                  <tr>
                    <td align="center" style="border-radius:4px;" bgcolor="#007da5">
                      <a target="_blank" href="#" target="_blank" style="font-size: 15px;font-weight: bold;text-decoration: none;color: #ffffff;background-color: #007da5;border:1px solid #007da5;border-radius:4px;padding:11px 20px;display: inline-block;">Learn
                                                                More
                                                            </a>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td colspan="3" style="padding-top: 10px;padding-bottom: 10px;">
                <p style="font-size:18px;line-height: 23px;min-width:600px;">Its tough to tell who's behind the mask sometimes. Give us a chance to remember what your face looks like by adding a profile picture to your account. Upon setting up your profile picture, within 48 hours it will be seen across all Office
                  365 products, including Teams and Outlook. Please select a work-appropriate photo.</p>
              </td>
            </tr>
          </table>
          <table>
            <tr>

              <td width="80">
                <img src="https://i.ibb.co/V2R8KDW/mobile.png" width="50" height="50" alt="" style="border-width:0;width:100%;max-width:50px;max-height:50;padding-right:10px;">
              </td>

              <td width="370">
                <p style="font-size:18px;line-height: 23px;min-width:600px; display: inline;"><strong>Get Setup On Your Mobile</strong></p>
              </td>

              <td width="150">

                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
                  <tr>
                    <td align="center" style="border-radius:4px;" bgcolor="#007da5">
                      <a target="_blank" # " target="_blank "
                                                                style="font-size: 15px;font-weight: bold;text-decoration: none;color: #ffffff;background-color: #007da5;border:1px solid #007da5;border-radius:4px;padding:11px 20px;display: inline-block; ">Learn
                                                                More
                                                            </a>
                                                        </td>
                                                        </tr>
                                                      </table>
                                                      
                                                </td>
    
                                            </tr>
                                            <tr>
                                                <td colspan="3 " style="padding-top: 10px;padding-bottom: 10px; ">
                                                    <p style="font-size:18px;line-height: 23px;min-width:600px; ">With Teams and Outlook mobile apps now available to all staff, it is possible to stay in touch, even when on the go. Follow the link to see how to get setup for both Android and iPhone devices. Link best viewed on a computer.</p>
                                                </td>
                                            </tr>
                                            
                                        </table>
    
                                        <table>
                                            <tr>
                                                <td width="80 ">
                                                    <img src="https://i.ibb.co/NTfj3jJ/feature.png " width="50 " height="50 " alt=" "style="border-width:0;width:100%;max-width:50px;max-height:50;padding-right:10px; ">
                                                </td>
                                                <td width="370 ">
                                                    <p style="font-size:18px;line-height: 23px;min-width:600px; display: inline; "><strong>Explore!</strong></p>
                                                </td>
                                                <td width="150 ">
                                                    
                                                    <table border="0 " cellpadding="0 " cellspacing="0 " role="presentation " style="border-collapse:separate;line-height:100%; ">
                                                        <tr>
                                                          <td align="center " style="border-radius:4px; " bgcolor="#007da5 ">
                                                            <a target="_blank "href="# " target="_blank "
                                                                style="font-size: 15px;font-weight: bold;text-decoration: none;color: #ffffff;background-color: #007da5;border:1px solid #007da5;border-radius:4px;padding:11px 20px;display: inline-block; ">Learn
                                                                More
                                                            </a>
                                                        </td>
                                                        </tr>
                                                      </table>
                                                
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="3 " style="padding-top: 10px;padding-bottom: 10px; ">
                                                    <p style="font-size:18px;line-height: 23px;min-width:600px; ">With office 365 there are tons of new features across all applications that will make your workday experience easier and more efficient. Head to Halton's Office 365 hubpage to begin exploring all the features offered. Link best viewed on a computer </p>
                                                </td>
                                            </tr>
                                            
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>

Any help is greatly appreciated.

Does this answer your question? Apparently Outlook has some issue rendering px when specified. https://stackoverflow.com/questions/15970660/html-email-in-outlook-table-width-issue-content-is-wider-than-the-specified-ta — Aaron Morefield, Jun 03 '21 at 17:08
@AaronMorefield unfortunately no. I already have the widths for each td in a row using width tag without px. Thanks for your suggestion though. — C.Radford, Jun 03 '21 at 17:49
More than just the width, I wonder if it is the px in the paddings. I am also curious if `min-widths` might also be an issue — Aaron Morefield, Jun 03 '21 at 17:57

score 0 · Answer 1 · answered Jun 04 '21 at 05:02

This will have to be more of a 'try these things' answer since there may be multiple issues.

First, I've never had any luck with colspans (or rowspans). Edit them out by nesting a new table in there.

Second, it may be that Outlook is running out of space. You've got min-widths of 600px, and padding as well. You usually only have 600px on desktops, and on mobiles, it's more like 300px. <td> elements will expand to the size necessary automatically, so if it doesn't need to be a specific width (your icon and buttons will need to be), then don't set it.

Third, you've ghost tables incorrectly. You only need them to fix something that Outlook (desktop) doesn't recognise, like max-width (and I probably min-width, but I've never needed to use that). It needs to be semantically correct, so this construction:

 <!--[if (gte mso 9)|(IE)]>
                                            <td style="padding-top:15px;padding-bottom:15px;">
                                        <![endif]-->
                    <td width="150" align="left" style="border-top:4px solid #4D5358;"></td>

                    <!--[if (gte mso 9)|(IE)]>
                                            </td>
                                        <![endif]-->

Will render two <td> elements straight after each other. If you want something different for non-Outlook desktops, then use this:

<!--[if !mso]>-->
  <td width="150" align="left" style="border-top:4px solid #4D5358;"></td>
<!--<![endif]-->

Fourth, consider what you want the layout to look like under a 300px viewport width. That may totally mess with your construction. But you can use @media screen and (max-width:600px) in a <style> section to set different styles for mobile (notwithstanding limitations on some versions of Gmail app, namely, Gmail IMAP/POP).

Fifth, buttons are a whole extra beast. I'm not going to answer it here since it deserves it's own question. Essentially, Outlook won't change an inline element to inline-block or block (or vice-versa). You have to style a <td> section and the <a> just gets colour and text-decoration.

Plus Outlook does not like the `#` in the href or it being blank. — Syfer, Jun 09 '21 at 07:54

Cannot get the ghost table correct

1 Answers1