Outlook 2010,2013 神秘表格列宽

Question

我有一个电子邮件签名，除了 Outlook 2007、2010、2013 之外，几乎所有内容都可以正常显示。

我已将所有内容放入一个表格中，但有一列行为异常，因此我一直在尝试寻找解决方法。我已经尝试了所有明显的方法，例如删除填充和图像，但它仍然会扭曲列宽。

我使用 litmus 来模拟 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

首先要做的是从您的表格中删除 colspan。

使用 colspan 和 rowspan 时，Outlook 往往会崩溃。

不如嵌套你的表格，如下所示：http://lehigh.edu/~inwww/seminar/intermediate/tables/table-nest.html