Question

我有一个电子邮件签名，除了Outlook 2007,2010,2013之外几乎所有内容都可以呈现。

我已将所有内容放入表中，但是有一列行为不当，所以我一直在尝试寻找修复方法。我已经尝试了所有明显的事情，比如删除填充和图像，但它仍然会扭曲列宽。

我使用石蕊来模拟Outlook 2013，它产生了这个：

这是html /样式：

任何人都可以解释为什么要这样做吗？什么修复？

<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。

使用colspan和rowspan时Outlook会出现问题。

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

Outlook 2010,2013神秘表列宽

1 个答案: