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的默认行为是填充表格的宽度，因此如果每行<td>只有一个<tr>，无论你做什么，它总是会占据整个表格的宽度。一种方法是在该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

上次td width 550px因此不会影响您的width 80%;

因此您可以在width span

上添加tag

宽度不适用于表格单元格

2 个答案: