I have created an email signature. The signature looks fine when i open it up in a browser, however whenever i try to use it in Gmail the signature appears out of proportion. It looks like gmail is ignoring some of the CSS. This is how it comes in my inbox :
https://codepen.io/Madses/pen/BeRbXa
Here's the code:
<div id="handtekening" style="width:650px;">
<span style="padding-bottom:30px;">Met vriendelijke groeten,</span>
<table style="width:650px; font-family:Open Sans, sans-serif; border-spacing: 0px; margin-top:40px;">
<thead>
<tr style="background-color:#d22a2a; font-size:12px; padding:0px;">
<td style="width:26px; height:149px; border-width: 0px; padding: 5px;"></td>
<td style="width:155px; height:149px;"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/mick-profiel.png" style="margin-top:-40px;"></td>
<td style="width:239px; height:149px; padding:28px 14px; color:#ffffff;">
<span style="font-weight:900;">Mick Brookman</span><br> Media Designer<br> mick@e-marketingsupport.nl
<br> Groeneweg 23, 3981 CK Bunnik<br> +31 088 339 76 78<br></td>
<td style="width:230px; height:149px;"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/Logos2019.gif"></td>
</tr>
</thead>
</table>
<table style="width:630px; margin-top:-15px; border-spacing: 0px;">
<thead>
<tr>
<td style="width:487px"></td>
<td style="width:32px;">
<a href="https://www.facebook.com/Duitsemarkt/"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/facebook.png"></a>
</td>
<td style="width:10px;"></td>
<td style="width:32px;">
<a href="https://www.instagram.com/dexportmarketeers/"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/instagram.png"></a>
</td>
<td style="width:10px;"></td>
<td style="width:32px;">
<a href="https://www.linkedin.com/company/803846/"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/linkedin.png"></a>
</td>
<td style="width:10px;"></td>
<td style="width:32px;">
<a href="https://twitter.com/duitsemarkt"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/twitter.png"></a>
</td>
<td style="width:5px;"></td>
</thead>
</table>
<table style="width:630px; margin-top:15px; border-spacing: 0px; margin-left:10px;">
<thead style="margin:0 auto; font-family:Open Sans, sans-serif;">
<tr style="background-color:#fff; box-shadow: 0px 0px 10px -2px rgba(148,148,148,0.5);">
<td style="width:172px height:82px; text-align:center; font-size:12px; font-weight:600; color:#d22a2a;">Wij zijn trots op onze<br>Awards en Partners</td>
<td style="width:115px; height:82px"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/google-premier-badge.jpg"></td>
<td style="width:115px; height:82px"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/fd-gazalle-2018.jpg"></td>
<td style="width:90px; height:82px"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/award.jpg"></td>
<td style="width:138px; height:82px"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/amazon.jpg"></td>
</thead>
<tbody style="width:650px; font-family:Open Sans, sans-serif;">
<tr>
<td colspan=9 style="color:#b2b2b2; font-size:12px; text-align:center; padding-top:12px;"><a href="https://www.e-marketingsupport.nl" style="color:#b2b2b2;">e-marketingsupport.nl</a> | <a href="https://www.dexport.nl" style="color:#b2b2b2;">dexport.nl</a> | <a href="https://www.verkopen-op-amazon.nl" style="color:#b2b2b2;"> verkopen-op-amazon.nl</a> | <a href="https://www.profitwiser.com" style="color:#b2b2b2;">profitwiser.nl</a> | <a href="https://www.crossborderevent.nl" style="color:#b2b2b2;">crossborder.nl</a></td>
</tr>
</tbody>
</table>
</div>
