Hi

I am currently building an HTML template that works well in all email readers except in Outlook 2016. I get a weird margin in some table cells (see attached picture).

In other Outlook versions, it looks good.

Here is the source code for the header:

      <table class="mobileWidth" width="600" bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td colspan="2" valign="middle"><table align="left" width="49%" class="headerCol1" cellpadding="0" cellspacing="0" border="0">
            <tr>
              <td valign="middle" class="headerColumnMobile" style="vertical-align:middle; text-align:left; padding-left:30px; padding-top:20px; padding-bottom:20px;"><a href="http://www.demenscentrum.se/"><img src="http://images.epostservice.se/uploads/39493971/593742-0.png" width="207" height="70" style="border:0;"></a></td>
            </tr>
          </table>
          <table align="right" width="49%" class="headerCol2" cellpadding="0" cellspacing="0" border="0">
            <tr>
              <td valign="middle" class="headerColumnMobile2" style="vertical-align:middle; text-align:right; padding-right:30px; padding-top:55px; color: #767676; font-size: 30px; font-weight: 300;"> $rubrik$ </td>
            </tr>
          </table></td>
      </tr>
      <tr>
        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tbody>
              <tr>
                <td width="30" class="mobileHide">&nbsp;</td>
                <td bgcolor="#9cd564" align="center" height="30" class="OpenSans headerMenu" style="color: #ffffff; font-size: 13px; font-weight: 300; line-height: 17px;"><a href="http://www.demenscentrum.se/" style="color:#fff; text-decoration:none;">Hemsida</a> &nbsp;&nbsp;|&nbsp;&nbsp; <span class="mobileHide">Skicka vidare  &nbsp;&nbsp;|&nbsp;&nbsp;  Prenumerera  &nbsp;&nbsp;|&nbsp;&nbsp; </span><a href="http://www.demenscentrum.se/Utbildning/" style="color:#fff; text-decoration:none;">Utbildning</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a href="http://www.demenscentrum.se/Publicerat/bestall1/" style="color:#fff; text-decoration:none;">Webbshop</a></td>
                <td width="30" class="mobileHide">&nbsp;</td>
              </tr>
            </tbody>
          </table></td>
      </tr>
    </table>

And the CSS:

    <style type="text/css">

    body {
        font-family: 'Open Sans', Arial, sans-serif;
    }

    .blockimagetext {
        font-family: 'Open Sans', Arial, sans-serif;
    }

    .blockimagetext2 {
        font-family: 'Open Sans', Arial, sans-serif;
    }

    .blockimagetext3 {
        font-family: 'Open Sans', Arial, sans-serif;
    }

    .blocktabletext {
        font-family: 'Open Sans', Arial, sans-serif;
    }

    .blocktabletext2 {
        font-family: 'Open Sans', Arial, sans-serif;
    }

    .blocktitle {
        font-family: 'Open Sans', Arial, sans-serif;
    }

    .OpenSans {
        font-family: 'Open Sans', Arial, sans-serif;
    } 

    /* Header 2-column */

    .headerCol1 {
        width:49%;      
        }   
    .headerCol2 {
        width:49%;
        }
    .wrapper {
        width:100%;
        }
    .headerColumnMobile {
        text-align:center;
        }
    .headerColumnMobile2 {
        text-align:center;
        }

    @media only screen and (max-width: 480px) {
    body {
        min-width:100% !important;
        }
    .blocktabletext {
        font-size:16px !important;
        }   
    .blocktabletext2 {
        font-size:16px !important;
        }   
    .blocktitle {
        font-size:23px !important;
        }   
    .title2Padding {
        font-size:23px !important;  
        }
    .mobileWidth {
        width:400px !important;
        min-width:400px !important;
        }
    .blockimage {
        max-width:160px !important;
        }
    .fullwidth {
        max-width:360px !important;
        }
    .openinbrowser a {
        font-size:9px !important;       
        }
    .banner a {
        font-size:9px !important;       
        }
    .mobileHide {
        display:none !important;        
        }
    .footerText {
        line-height:200% !important;
        padding:10px 0px 10px 0px;      
        }
    .wrapper .column22 {
        padding-left:0px !important;
        }
    .bannerImg {
        width:400px !important;
        height:auto !important;
        }
    .appleLinks a {
        color:#353535 !important;
        }
    .column21 img {
        max-width:170px !important;
        height:auto !important;
        }
    .column22 img {
        max-width:170px !important;
        height:auto !important;
        }
    .column31 img {
        max-width:107px !important;
        height:auto !important;
        }
    .column32 img {
        max-width:106px !important;
        height:auto !important;
        }
    .column33 img {
        max-width:107px !important;
        height:auto !important;
        }
    .newsletterbody {
        padding:10px 10px 15px 10px !important;
        }
    .headerMenu {
        padding-left:0px;
        text-align:center !important;
        }

        /* Header 2-column */

        .headerCol1 {
            width:100% !important;          
        }
        .headerCol2 {
            width:100% !important;
        }               
        .headerColumnMobile {
            width:400px !important;         
            padding-bottom:10px !important;
            padding-top:10px !important;
            padding-left:0px !important;
            text-align:center !important;
        }
        .headerColumnMobile2 {
            width:400px !important;
            padding-top:10px !important;
            padding-bottom:15px !important;
            padding-right:0px !important;
            text-align:center !important;
        }   
    }
    </style>

    <!--[if gte mso 9]><style type="text/css"> 

    body {
        font-family: Arial, sans-serif;
    }

    .blockimagetext {
        font-family: Arial, sans-serif;
    }

    .blockimagetext2 {
        font-family: Arial, sans-serif;
    }

    .blockimagetext3 {
        font-family: Arial, sans-serif;
    }

    .blocktabletext {
        font-family: Arial, sans-serif;
    }

    .blocktabletext2 {
        font-family: Arial, sans-serif;
    }

    .blocktitle {
        font-family: Arial, sans-serif;
    }

    .OpenSans {
        font-family: Arial, sans-serif;
    }       

    </style><![endif]-->