Breite funktioniert nicht auf Tabellenzellen

Question

Aus irgendeinem Grund, wenn ich die Breite für eine Zelle in einer Tabelle festlegen, hat dies keinen Einfluss auf die Breite der Zelle. FYI Ich verwende Inline-Stile für Mailer.

<table cellpadding="0" cellspacing="0" width="100%"> 
    <tr> 
     <td align="center"> 
      <table cellpadding="0" cellspacing="0" width="550" style="width: 100%; max-width: 550px; text-align: center; border: 1px solid #003a4b;"> 
       <tr> 
        <td style="padding-top: 10px;"><span style="font-family: helvetica, sans-serif; font-size: 37px; font-weight: bold; color: #93d600; border-bottom: 1px solid #003a4b;">Hunters Conference 2017</span></td> 
       </tr> 

       <tr> 
        <td width="80%" style="padding: 20px 0; background-color: blue;"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b; background-color: red;">Fyber were honoured to attend and support such a fantastic conference, congratulations to everyone that won a prize on our wheel of fortune!</span></td> 
       </tr> 

       <tr> 
        <td width="80%" style="padding: 0 55px; padding-bottom: 20px;"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b;">We hope you all had a great day, we enjoyed catching up with everyone and it was nice to see our clients face to face. </span></td> 
       </tr> 

       <!--[if mso]> 
       <tr> 
        <td style="padding-bottom: 20px;"> 
         <img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/2c3e3b5e-9a9f-4864-a36f-6359b0dd4b75.jpg" alt="Spinning Wheel" width="550" style="width: 100%; max-width: 550px;"> 
        </td> 
       </tr> 
       <![endif]--> 

       <!--[if !mso]><!-- --> 
       <tr> 
        <td style="padding-bottom: 20px;"> 
         <img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/19e810cd-df47-474b-aa47-3f33bf26922a.gif" alt="Spinning Wheel" width="550" style="width: 100%; max-width: 550px;"> 
        </td> 
       </tr> 
       <!--<![endif]--> 
      </table> 
     </td> 
    </tr> 
</table> 

https://jsfiddle.net/xmbsemje/

Answer 1

td Standardverhalten hinzuzufügen, ist die Breite der Tabelle zu füllen, also wenn du nur eine <td> pro r hast ow <tr>, es würde immer die volle Breite der Tabelle gehen, egal was Sie tun. Ein Ansatz besteht darin, eine Tabelle in diesem td zu erstellen und stattdessen die Breite auf Tabelle zu setzen. Das Auffüllen von Links und Rechts funktioniert auch nicht in E-Mails. Daher ist es die beste Option, Tabellen mit definierter Breite zu erstellen und zu zentrieren.

Der andere Ansatz wäre, Abstandhalterzellen links und rechts zu haben, um Ihnen Platz zu geben. Ich habe Ihren Code (nur die Textzellen mit blauem/rotem und weißem Hintergrund) nach dem ersten Ansatz geändert.

Bitte beachten Sie: Ich kann nicht den gesamten Code beheben hat, nur ein paar ändern Sie

<table cellpadding="0" cellspacing="0" width="100%"> 
 
    <tr> 
 
     <td align="center"> 
 
      <table cellpadding="0" cellspacing="0" width="550" style="width: 100%; max-width: 550px; text-align: center; border: 1px solid #003a4b;"> 
 
       <tr> 
 
        <td style="padding-top: 10px;"><span style="font-family: helvetica, sans-serif; font-size: 37px; font-weight: bold; color: #93d600; border-bottom: 1px solid #003a4b;">Hunters Conference 2017</span></td> 
 
       </tr> 
 

 
       <tr> 
 
        <td align="center" style="padding: 20px 0; background-color: blue;"> 
 
        <table border="0" cellpadding="0" cellspacing="0" style="width:80%;"> 
 
         <tr> 
 
         <td align="left"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b; background-color: red;">Fyber were honoured to attend and support such a fantastic conference, congratulations to everyone that won a prize on our wheel of fortune!</span></td> 
 
         </tr> 
 
        </table> 
 
        </td>      
 
       </tr> 
 

 
       <tr> 
 
        <td align="center" style="padding: 20px 0;"> 
 
        <table border="0" cellpadding="0" cellspacing="0" style="width:80%;"> 
 
         <tr> 
 
         <td align="left"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b;">We hope you all had a great day, we enjoyed catching up with everyone and it was nice to see our clients face to face. </span></td> 
 
         </tr> 
 
        </table> 
 
        </td> 
 
       </tr> 
 

 
       <!--[if mso]> 
 
       <tr> 
 
        <td style="padding-bottom: 20px;"> 
 
         <img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/2c3e3b5e-9a9f-4864-a36f-6359b0dd4b75.jpg" alt="Spinning Wheel" width="550" style="width: 100%; max-width: 550px;"> 
 
        </td> 
 
       </tr> 
 
       <![endif]--> 
 

 
       <!--[if !mso]><!-- --> 
 
       <tr> 
 
        <td style="padding-bottom: 20px;"> 
 
         <img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/19e810cd-df47-474b-aa47-3f33bf26922a.gif" alt="Spinning Wheel" width="550" style="width: 100%; max-width: 550px;"> 
 
        </td> 
 
       </tr> 
 
       <!--<![endif]--> 
 
      </table> 
 
     </td> 
 
    </tr> 
 
</table>

zu erhalten begonnen

Answer 2

letzte tdwidth550px so bewirken nicht Ihre width80%;

so können Sie width auf spantag