寬度不適用於表格單元

Question

由於某些原因，當我在表格中設置單元格的寬度時，它不會影響單元格的寬度。僅供參考我使用嵌入式樣式的郵件。

<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的默認行爲添加width是填寫表格的寬度，所以如果你只有一個<td>每r無論你做什麼，它總是會走滿表的全部寬度。 一種方法是在該td內創建一個表格，並將寬度放在表格上。在電子郵件中左右填充也不起作用，因此創建具有定義寬度的表並將它們居中放置是最佳選擇。

另一種方法是將間隔單元放在左側和右側以提供填充空間。我使用第一種方法修改了代碼（只是帶有藍色/紅色和白色背景的文本單元格）。

請注意：我並沒有解決所有的代碼，只要改變一對夫婦，讓你開始

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

Answer 2

最後tdwidth550px所以不會影響你的width80%;

這樣你就可以spantag