的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