Question

我正在尝试为HTML电子邮件内容做好标记。我有一张桌子如下图所示。在gmail（移动和Web）应用程序中查看时，表格的样式未得到应用。此表的样式在Apple邮件中测试时也未应用。任何人都可以帮忙。

<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节点模块包以编程方式内联它。所有头部和样式标签都被删除，只有内联的CSS样式适用

Answer 1

您无法在电子邮件中按ID或类使用样式，如果要设置电子邮件的样式，则必须在标记内设置样式。

举个简单的例子：

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

并且不要忘记在标题上设置Content-type：text / html; charset = UTF-8。

Answer 2

您可以使用这样的内嵌样式......

Here

<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中工作......

https://codeshare.io/GAEng8

HTML电子邮件内容的CSS未在Gmail中应用

2 个答案: