Question

我正在尝试以纯html和css设计电子邮件模板，以显示具有多列表格格式的电子邮件。下面是我的标记，它在Microsoft Outlook上以正确的间距，自动对齐功能可以很好地工作，但是gmail在自动间距和对齐功能方面效果不佳。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        html,
        body {
            background-color: #f6f6f6;
            margin: 0;
            padding: 0;
            font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
            color: #505050;
        }
        .danger {
            background-color: red;
            display:inline;
        }
        .warning {
            background-color: orange;
            display:inline;
        }
    </style>
</head>
<body>    
        <a href="https://myalerts.com">
            <span>Alerts1</span>
        </a>
        <hr />
        <table width="100%">
        <tr>
        <td style="width:auto;" class="warning">20</td>
        <td>Alpha Clinic</td>
        <td style="width:auto;" class="warning">25</td>
        <td>Bravo Clinic</td>           
        </tr>
        <tr>
        <td style="width:auto;" class="danger">55</td>
        <td>Delta Clinic</td>
        <td style="width:auto;" class="warning">34</td>
        <td>Echo Clinic</td>            
        </tr>
        </table>        
        <br />
        <a href="https://myalerts.com">
            <span>Alerts2</span>
        </a>
        <hr />
        <table width="100%">
        <tr>
        <td style="width:auto;" class="danger">30</td>
        <td>Alpha Clinic</td>
        <td style="width:auto;" class="warning">18</td>
        <td>Bravo Clinic</td>           
        </tr>
        <tr>
        <td style="width:auto;" class="warning">17</td>
        <td>Delta Clinic</td>
        <td style="width:auto;" class="warning">25</td>
        <td>Echo Clinic</td>
        <td style="width:auto;" class="danger">35</td>
        <td>Foxtrot Clinic</td>
        </tr>       
        </table>
        <br />            
</body>
</html>

Gmail布局：

Microsoft Outlook布局：

具有多列表格布局自动间距的Gmail电子邮件不起作用

0 个答案: