Outlook 2010,2013之谜table列宽

Question

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

我已将所有内容放入 table，但有一列出现问题，因此我一直在尝试寻找修复方法。我已经尝试了所有明显的方法，例如删除填充和图像，但它仍然会扭曲列宽。

我用石蕊模拟了 outlook 2013，它产生了这个：

http://imgur.com/xAjTTJI - 相反，根本不应该有间隙

这里是 html/styling:

谁能弄清楚为什么会这样？解决方法是什么？

<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

首先要做的是从 table 中删除 colspans。

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

而是嵌套您的 table，如下所示：http://lehigh.edu/~inwww/seminar/intermediate/tables/table-nest.html

Outlook 2010,2013之谜table列宽

Outlook 2010,2013 mystery table column widths

html

css

outlook

signature