样式化 HTML 电子邮件中的嵌套表格答案

【问题标题】：Styling nested tables in HTML email样式化 HTML 电子邮件中的嵌套表格
【发布时间】：2015-12-17 11:05:56
【问题描述】：

我有一个使用嵌套表格的 HTML 电子邮件模板。我正在努力实现最大的电子邮件客户端支持。我想知道使用内联样式，我应该始终将其应用于最低级别 td 还是可以将样式应用于父级 table 或 td？

例如，我知道在浏览器中，以下两种方法都可以：

<table border="0" cellpadding="20" cellspacing="0" bg-color="#eeeeee" width="100%">
  <tr>
    <td valign="top" style="font-size:12px; line-height:16px;">

      <table border="0" cellpadding="0" cellspacing"0" width="600">
        <tr>
          <td valign="top">
            Content 1
          </td>
          <td valign="top">
            Content 1
          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>

或者

<table border="0" cellpadding="20" cellspacing="0" bg-color="#eeeeee" width="100%">
  <tr>
    <td valign="top">

      <table border="0" cellpadding="0" cellspacing"0" width="600">
        <tr>
          <td valign="top" style="font-size:12px; line-height:16px;">
            Content 1
          </td>
          <td valign="top" style="font-size:12px; line-height:16px;">
            Content 1
          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>

这里的区别在于内联样式。第一个示例避免了重复并且更易于维护，而不是将内联样式应用于多个子 tds。但是，某些电子邮件客户端是否会为子table、tr 或td 应用新样式？

【问题讨论】：

对于字体和其他东西，我总是在每个 td 和 p 上都这样做。我还将表格样式添加到内联样式中（以及保留border="0" 等内容）以获得最大的兼容性。 Mailchimp have a good guide about email templates
感谢您的意见。我从一个 mailchimp 模板开始，但很快意识到他们将大部分/所有样式都放在了 <head> 中，并且它不像我预期的那样向后兼容。

标签： html css email

【解决方案1】：

样式越低，就越安全。许多电子邮件客户端已经添加了自己的样式。例如，如果他们有一个带有

的 css 行

td {
   font-size:14px;
}

这可能会破坏你想要的风格。

【讨论】：

那么电子邮件客户端默认样式会覆盖我添加到父元素的内联样式吗？
如果客户端样式的css-rule更具体。但是由于您永远不知道客户可能拥有什么，所以最好还是安全