电子邮件模板问题 - 表格过度拉伸答案

【问题标题】：Email template issue - Table overstretched电子邮件模板问题 - 表格过度拉伸
【发布时间】：2017-06-23 18:24:38
【问题描述】：

我有一个我创建的电子邮件模板，但我似乎无法弄清楚表格是什么，我附上了一个屏幕截图以供参考。任何帮助都会很棒。

这是模板那部分的代码：

<tr>
    <td style="width:27px;height:53px;display:block;float:left;padding:0;margin:0;">
        <img src="#" />
    </td>
    <td style="width:31px;height:53px;display:block;float:left;padding:0;margin:0;">    <a href="http://youtu.be" target="_blank"><img src="#" /></a>
    </td>
    <td style="width:24px;height:53px;display:block;float:left;padding:0;margin:0;">    <a href="#" target="_blank"><img src="#" /></a>
    </td>
    <td style="width:25px;height:53px;display:block;float:left;padding:0;margin:0;">    <a href="#" target="_blank"><img src="#" /></a>
    </td>
    <td style="width:518px;height:53px;display:block;float:left;padding:0;margin:0;">
        <img src="#" />
    </td>
</tr>
<tr>
    <td style="display:block;float:left;padding:0;margin:0;">
        <img src="#" />
    </td>
</tr>

【问题讨论】：

在我的经验中，电子邮件中的浮动是不行的，您为什么首先尝试浮动表格单元格？
看到这里，我同意 PeterVR。浮动表格单元格？这是非常不标准的，可能会导致奇怪的渲染问题。
我制作了很多电子邮件模板，根据我的经验，我可以肯定地说您不应该在电子邮件或表格中使用浮点数。

标签： css html-table css-float html-email

【解决方案1】：

在表格单元格中使用 html align="left" 代替浮动。您不需要在表格单元格中使用display:block;，而是将其放在图像标签中。

另外，删除表格单元格中的所有 css 宽度和高度，并将其替换为 html width="" 和 height=""

另外，如果你把它放在你的表格标签中：border="0" cellpadding="0" cellspacing="0"，你不需要在表格单元格 css 中填充和边距。

所有组合的基本示例：

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="31" height="53" align="left">
      <a href=""><img  alt="" src="" width="31" height="53" border="0" style="margin: 0; border: 0; padding: 0; display: block;"></a>
    </td>
  </tr>
</table>

注意 - 左对齐是默认设置，因此不需要。

【讨论】：

感谢您的帮助！我很快就会试试这个