css for HTML 电子邮件内容未在 gmail 中应用

Question

我正在尝试为 HTML 电子邮件内容准备标记。我有一个 table ，如下所示。在 gmail（移动和网络）应用程序中查看时，table 的样式未得到应用。此外，在苹果邮件中测试时，此 table 的样式未得到应用。谁能帮帮忙

<table cellspacing="0" cellpadding="0" border="0" width="100%" id="txn-info-container" style="padding: 0px 0px 0px 0px">
    <tr>
        <td width="25">
        </td>
        <td width="550">
            <table border="0" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td>label</td>
                        <td>Value</td>
                    </tr>
                    <tr>
                        <td>label</td>
                        <td>value</td>
                    </tr>
                    <tr>
                        <td>label</td>
                        <td>value</td>
                    </tr>
                </tbody>
            </table>
        </td>
        <td width="25">
        </td>
    </tr>
</table>

#txn-info-container table {
    max-width: 550px;
    width: 100%;
    background-color: #F7F6F6;
    border-top: 1px solid #dfdddc;
}
#txn-info-container table td {
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #dfdddc;
    font-family: 'Roboto', 'Arial', 'Helvetica';
    font-size: 12px;
    /* text-indent: 10px; */
    Margin-left: 10px;
    padding-left: 10px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #txn-info-container table  {
    Margin-left: 0px!important;
    }
}

注意：我在样式标签中编写所有 css 并使用 inline-css 节点模块包以编程方式将其内联。所有 head 和 style 标签都被删除，只有内联 css 样式应用

Answer 1

您不能通过 id 或 class 在电子邮件中使用样式，如果您想为电子邮件设置样式，则必须在标签内设置样式。

举个简单的例子：

<a style="color:white;background:black;padding:20px;">This Link</a>

并且不要忘记在 header.

上设置 Content-type:text/html;charset=UTF-8

Answer 2

您可以像这样使用内联样式...

https://codeshare.io/GAEng8

<table width="100%" cellpadding="0" cellspacing="0" id="dummy" bgcolor="#F7F6F6" style="border: 1px solid #dfdddc;border-collapse: collapse;border-left:0;border-right:0;">
  <tr>
    <td style="border-bottom: 1px solid #dfdddc;height: 30px;line-height: 30px;font-family: \'Roboto\', \'Arial\', \'Helvetica\';font-size: 12px;padding-left: 10px;">Label</td>
    <td style="border-bottom: 1px solid #dfdddc;height: 30px;line-height: 30px;font-family: \'Roboto\', \'Arial\', \'Helvetica\';font-size: 12px;padding-left: 10px;">Value</td>
  </tr>
  <tr>
    <td style="border-bottom: 1px solid #dfdddc;height: 30px;line-height: 30px;font-family: \'Roboto\', \'Arial\', \'Helvetica\';font-size: 12px;padding-left: 10px;">label</td>
    <td style="border-bottom: 1px solid #dfdddc;height: 30px;line-height: 30px;font-family: \'Roboto\', \'Arial\', \'Helvetica\';font-size: 12px;padding-left: 10px;">value</td>
  </tr>
  <tr>
    <td style="height: 30px;line-height: 30px;font-family: \'Roboto\', \'Arial\', \'Helvetica\';font-size: 12px;padding-left: 10px;">label</td>
    <td style="height: 30px;line-height: 30px;font-family: \'Roboto\', \'Arial\', \'Helvetica\';font-size: 12px;padding-left: 10px;">value</td>
  </tr>
</table>

它也适用于 gmail...

css for HTML 电子邮件内容未在 gmail 中应用

css for HTML Email content not getting applied in gmail

css

html-table

html-email