如何更改响应式电子邮件中的背景颜色

Question

我目前正在创建一封响应式电子邮件，尽管我正在努力将突出显示的面板（见红色边框）设置为灰色。我正在使用表格来构建电子邮件。谁能告诉我为什么这不起作用？

非常感谢，

以红色突出显示的面板应该是完全灰色的

请参考我的 Plunker：http://plnkr.co/edit/qTeN9hUGoko2090Iy8f3?p=preview

代码片段

<table class="payment-details" bgcolor="#fff">
<tr>
  <td></td>
  <td class="header container">

    <div class="content">
      <table bgcolor="#333">  <!-- HELP - this doesn't colour the entire panel -->
      <tr>
          <td style="color: #fff; font-weight: bold; padding: 10px;">
            example text
          </td>
      </tr>
      </table>
    </div>

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

更新

感谢您的评论，我已经更新了 Plunker，它确实可以工作，尽管颜色会在页面宽度上溢出，这可以修复吗？

Answer 1

如果您将 style="background-color: #333333;" 添加到您的 TD，它应该可以工作。我还建议使用 #333333 而不是 #333，因为某些客户端不支持 shorthand 十六进制代码。

Answer 2

<table bgcolor="#333">  <!-- THIS OPENS HERE -->
  <tr>
      <td style="color: #fff; font-weight: bold; padding: 10px;">
        example text
      </td>
  </tr>
</table> <!-- AND CLOSES HERE--->

您在屏幕截图中用红色圈出的 Table 在下方 -

<!------------------------------------ 
---- BODY ----------------------------
------------------------------------->

<table class="head-wrap" bgcolor="#ccc">

因此您需要将背景颜色添加到 table 元素。

如何更改响应式电子邮件中的背景颜色

how to change the background colour in a responsive email

html-email

responsive-design