的Outlook 2010,2013神秘表格列宽

Question

我有一个电子邮件签名呈现除了Outlook 2007中，2010几乎一切好起来，2013年

我已经把所有的内容到一个表，但有一专栏是行为不当，所以我一直在试图寻找修复。我尝试了所有显而易见的东西，例如删除填充和图像，但它仍然扭曲了列宽。

我用石蕊模拟Outlook 2013中，它会产生这样的：

http://imgur.com/xAjTTJI - 那里倒是应在所有

这里没有缝隙是HTML /造型：

https://jsfiddle.net/LL9s1zds/1/

任何人都可以解决它为什么这样做？以及修复程序是什么？

<style type="text/css"> 
.tg {border-collapse:collapse;font-family:Arial, Helvetica, sans-serif;} 
.tg td{font-size:14px;overflow:hidden;word-break:normal;} 
.tg th{font-size:14px;font-weight:normal;overflow:hidden;word-break:normal;} 
.tg .tg-name{font-size:16px;color:#333333;vertical-align:middle;text-align:left;} 
.tg .tg-titl{font-size:12px;vertical-align:top;padding-bottom:10px;} 
.tg .tg-cont{vertical-align:middle;} 
.tg .tg-con0{vertical-align:top;padding:3px;} 
.tg .tg-con1{font-size:14px;vertical-align:middle;} 
.tg .tg-con2{font-size:14px;vertical-align:middle;padding-bottom:20px;} 
.tg .tg-conn{font-size:16px;letter-spacing:1px;} 
.tg .tg-soci{vertical-align:middle;padding:15px 5px;} 
.tg .tg-regu{font-size:10px;vertical-align:top} 
.tg .tg-ban1{background-color:#E8001D;vertical-align:top;padding:12px;} 
.tg .tg-ban2{background-color:#E8001D;vertical-align:top;padding:12px;padding-left:25px} 
.tg .tg-ban3{background-color:#E8001D;vertical-align:top;padding:12px;padding-left:40px} 
.tg .tg-etce{font-size:10px;color:#009900;vertical-align:middle} 
.tg .tg-envi{font-size:10px;color:#009900;padding-top:10px;} 
.tg .tg-reg1{vertical-align:middle;padding-left:50px;padding-top:10px;} 
.tg .tg-reg2{vertical-align:middle;padding-left:20px;padding-top:15px;} 
.tg .tg-reg3{vertical-align:middle;padding-left:10px;padding-top:10px;} 
</style> 
<br> 
<table class="tg" style="und;table-layout:fixed;width:600px;"> 
<colgroup> 
<col style="width: 21px"> 
<col style="width: 166px"> 
<col style="width: 58px"> 
<col style="width: 58px"> 
<col style="width: 58px"> 
<col style="width: 58px"> 
<col style="width: 58"> 
<col style="width: 58"> 
<col style="width: 58"> 
</colgroup> 
<tr> 
<th class="tg-name" colspan="9">%%displayname%%</th> 
</tr> 
<tr> 
<td class="tg-titl" colspan="9">%%title%%</td> 
</tr> 
<tr> 
<td class="tg-cont"><img src="http://serviceteamit.co.uk/wp-content/uploads/2016/04/phone.png" alt="phone"></td> 
<td class="tg-con1" colspan="8">%%phonenumber%%</td> 
</tr> 
<tr> 
<td class="tg-cont"><img src="http://serviceteamit.co.uk/wp-content/uploads/2016/04/mail.png" alt="e-mail"></td> 
<td class="tg-con1" colspan="8">%%email%%</td> 
</tr> 
<tr> 
<td class="tg-con0"><img src="http://serviceteamit.co.uk/wp-content/uploads/2016/04/pin.png" alt="address"></td> 
<td class="tg-con2" colspan="8">%%street%%, %%city%%, %%zipcode%%</td> 
</tr> 
<tr> 
<td class="tg-ban1" colspan="2"><img src="http://lorempixel.com/158/32/" alt="Company Logo"></td> 
<td class="tg-ban2" colspan="3"><img src="http://lorempixel.com/150/31/" alt="Award 1"></td> 
<td class="tg-ban3" colspan="4"><img src="http://lorempixel.com/177/31/" alt="award2"></td> 
</tr> 
<tr> 
<td class="tg-conn" colspan="2">Connect With Us</td> 
<td class="tg-soci"> 
    <a href=http://twitter.com/> 
     <img src="http://serviceteamit.co.uk/wp-content/uploads/2016/04/tw.png" alt="Twitter"></a></td> 
<td class="tg-soci"> 
    <a href=http://facebook.com/> 
     <img src="http://serviceteamit.co.uk/wp-content/uploads/2016/04/fb.png" alt="Facebook"></a></td> 
<td class="tg-soci"> 
    <a href=http://plus.google.com/> 
     <img src="http://serviceteamit.co.uk/wp-content/uploads/2016/04/gp.png" alt="Google Plus"></a></td> 
<td class="tg-soci"> 
    <a href=http://youtube.com/user/> 
     <img src="http://serviceteamit.co.uk/wp-content/uploads/2016/04/yt.png" alt="YouTube"></a></td> 
<td class="tg-soci"> 
    <a href=http://instagram.com/> 
     <img src="http://serviceteamit.co.uk/wp-content/uploads/2016/04/ig.png" alt="Instagram"></a></td> 
<td class="tg-soci"> 
    <a href=http://pinterest.com/> 
     <img src="http://serviceteamit.co.uk/wp-content/uploads/2016/04/pi.png" alt="Pintrest"></a></td> 
<td class="tg-soci"> 
    <a href=http://blog..co.uk/feed/> 
     <img src="http://serviceteamit.co.uk/wp-content/uploads/2016/04/rs.png" alt="Blog RSS"></a></td> 
</tr> 
<tr> 
<td class="tg-regu" colspan="9">This message and any attachments are intended for the individual to whom they are specifically addressed to above. Any views expressed in this email are those of the individual sender, except where specifically stated otherwise. Registered Office: 123 Fake Street, Glasgow</td> 
</tr> 
<tr> 
<td class="tg-etce"><img src="http://serviceteamit.co.uk/wp-content/uploads/2016/04/environment.png" alt="think before printing"></td> 
<td class="tg-envi" colspan="3">Please consider the environment before printing this email</td> 
<td class="tg-reg1" colspan="2"><img src="http://lorempixel.com/58/39/" alt="3"></td> 
<td class="tg-reg2" colspan="2"><img src="http://lorempixel.com/78/37/" alt="3"></td> 
<td class="tg-reg3"><img src="http://lorempixel.com/35/35/" alt="3"></td> 

Answer 1

要做的第一件事情就是从表中删除colspans。

展望倾向于使用合并单元格和行跨度时，吓坏了。如下图所示

而是窝表格：http://lehigh.edu/~inwww/seminar/intermediate/tables/table-nest.html