HTML邮件模板不同行<td>定义宽度不生效问题求助

嘿，梦回1998做邮件模板可太有那味儿了，但邮件客户端对表格的渲染简直是魔鬼细节！我一眼就瞅到你这儿的问题根源了，咱们一步步来搞定：

核心问题分析 #

1. 宽度总和不匹配：你外层表格设的是503px，但上面那一行的三个单元格宽度加起来是42+420+42=504px——多了1px！浏览器/邮件客户端会自动调整单元格宽度来适配父容器，直接把你设定的宽度给冲没了。
2. 表格布局模式默认是自动适配：默认的table-layout: auto会让单元格根据内容自动调整宽度，哪怕你写了固定width也没用，尤其是当内容或者总和有冲突的时候。

具体修复步骤 #

• 修正宽度总和：把上面一行的中间单元格改成419px，这样42+419+42=503px，和外层表格宽度完全匹配，这是基础！
• 强制固定表格布局：给外层表格加上内联CSSstyle="table-layout: fixed;"，这个属性会让表格严格按照你定义的宽度渲染，不会被内容或者自动计算打乱。
• 双写宽度属性：给每个<td>同时加上HTML的width属性和CSS的style="width:XXpx;"，比如<td width="42" style="width:42px;">&nbsp;</td>——毕竟有些老邮件客户端只认HTML属性，有些认CSS，双保险准没错。
• 用padding代替空格：别用   来撑空白了，改用padding更可控，避免空格宽度影响单元格设定的尺寸。

修改后的代码示例 #

<tr>
  <td>
    <table bgcolor="#c1d781" width="503" align="center" border="1" style="table-layout: fixed;">
      <tr>
        <td colspan="3">
          <p mc:edit="element-title">„Lorem Lorem Lorem“</p>
        </td>
      </tr>
      <tr>
        <td height="10" colspan="3"></td>
      </tr>
      <tr>
        <td width="42" style="width:42px;">&nbsp;</td>
        <td align="center" width="419" style="width:419px;">
          <p mc:edit="element-teaser"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. </p>
        </td>
        <td width="42" style="width:42px;">&nbsp;</td>
      </tr>
      <tr>
        <td height="50" colspan="3"></td>
      </tr>
      <tr>
        <td width="83" style="width:83px;">&nbsp;</td>
        <td align="center" width="337" style="width:337px;">
          <p mc:edit="element-button"><a href="#">BUTTON</a> </p>
        </td>
        <td width="83" style="width:83px;">&nbsp;</td>
      </tr>
      <tr>
        <td height="60" colspan="3"></td>
      </tr>
    </table>
  </td>
</tr>

这样改完之后，你的单元格宽度应该就能严格按照设定的来显示了，毕竟邮件模板的表格就是要抠这种像素级的细节！

内容的提问来源于stack exchange，提问作者felixo