Перспектива 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 из таблицы.

Outlook имеет тенденцию волноваться при использовании colspan и rowspan.

Скорее гнездо ваш стол, как показано здесь: http://lehigh.edu/~inwww/seminar/intermediate/tables/table-nest.html