css - 电子邮件模板问题 - 表格过度紧张

Question

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

这是模板那部分的代码:

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

Answer 1

在表格单元格中使用 html align="left" 而不是 float 。您不需要在表格单元格中使用 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>

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