html 电子邮件表格边框在不同设备上看起来不同答案

【问题标题】：html email table border looks different on different deviceshtml 电子邮件表格边框在不同设备上看起来不同
【发布时间】：2017-07-23 15:22:06
【问题描述】：

我目前正在自定义 Woocommerce 电子邮件模板，很奇怪，这些模板中的表格边框在不同设备上看起来不同。

第一张照片是从 Macbook Mail 应用程序上看到的邮件中截取的，边框以应有的方式显示。

这是来自 iPhone Gmail 应用程序的屏幕截图；边框极度扭曲。

我无法附加从原生 iPhone 邮件应用程序中获取的邮件，但边框仅出现在表格的某些部分。

下面是表格的代码。

<table class="td" cellspacing="0" cellpadding="6" style="width: 100%; font-family: ; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; border-spacing: 0 !important; border-collapse: collapse !important; table-layout: auto; margin: 0 auto !important; color: #333333; border: 0.5px solid #e5e5e5;" lucida sans unicode grande sans-serif border="1">
<thead><tr>
<th class="td" scope="col" style="text-align: left; font-size: 11px; color: #333333; border: 0.5px solid #e5e5e5; padding: 12px;">Product</th>
            <th class="td" scope="col" style="text-align: left; font-size: 11px; color: #333333; border: 0.5px solid #e5e5e5; padding: 12px;">Quantity</th>
            <th class="td" scope="col" style="text-align: left; font-size: 11px; color: #333333; border: 0.5px solid #e5e5e5; padding: 12px;">Price</th>
        </tr></thead>
<tbody style="font-size: 11px;"><tr class="order_item">
<td class="td" style="text-align: left; vertical-align: middle; border: 1px solid #eee; font-family: ; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; padding: 12px;" lucida sans unicode grande sans-serif word-wrap:break-word>CLLR Issue
1<br><small></small>
</td>
            <td class="td" style="text-align: left; vertical-align: middle; border: 1px solid #eee; font-family: ; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; padding: 12px;" lucida sans unicode grande sans-serif>1</td>
            <td class="td" style="text-align: left; vertical-align: middle; border: 1px solid #eee; font-family: ; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; padding: 12px;" lucida sans unicode grande sans-serif><span class="woocommerce-Price-amount
amount"><span class="woocommerce-Price-currencySymbol">£</span>12.00</span></td>
        </tr></tbody>
<tfoot>
<tr>
<th class="td" scope="row" colspan="2" style="text-align: left; font-size: 11px; border-top-width: 4px; color: #333333; border: 0.5px solid #e5e5e5; padding: 12px;">Subtotal:</th>
                        <td class="td" style="text-align: left; font-size: 11px; border-top-width: 4px; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; border: 0.5px solid #e5e5e5; padding: 12px;"><span class="woocommerce-Price-amount
amount"><span class="woocommerce-Price-currencySymbol">£</span>12.00</span></td>
                    </tr>
<tr>
<th class="td" scope="row" colspan="2" style="text-align: left; font-size: 11px; color: #333333; border: 0.5px solid #e5e5e5; padding: 12px;">Shipping:</th>
                        <td class="td" style="text-align: left; font-size: 11px; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; border: 0.5px solid #e5e5e5; padding: 12px;">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>3.90</span> <small class="shipped_via">via Royal Mail 1st Class Signed for</small>
</td>
                    </tr>
<tr>
<th class="td" scope="row" colspan="2" style="text-align: left; font-size: 11px; color: #333333; border: 0.5px solid #e5e5e5; padding: 12px;">Payment Method:</th>
                        <td class="td" style="text-align: left; font-size: 11px; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; border: 0.5px solid #e5e5e5; padding: 12px;">Stripe</td>
                    </tr>
<tr>
<th class="td" scope="row" colspan="2" style="text-align: left; font-size: 11px; color: #333333; border: 0.5px solid #e5e5e5; padding: 12px;">Total:</th>
                        <td class="td" style="text-align: left; font-size: 11px; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; border: 0.5px solid #e5e5e5; padding: 12px;"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>15.90</span></td>
                    </tr>
</tfoot>
</table>

这是头部的 CSS。

<style type="text/css">@media only screen and (min-device-width: 375px) and (max-device-width: 413px) { 
    .email-container {
        min-width: 375px !important;
    }
}@media only screen and (max-width: 480px){
    #body_content_inner,
    h2,
    h3,
    td {
     font-size: 14px !important;
    }
}@media only screen and (min-device-width: 375px) and
(max-device-width: 413px) { 
            .email-container {
                min-width: 375px !important;
            }
}@media only screen and (max-width: 480px){
    #body_content_inner,
    h2,
    h3,
    td {
     font-size: 14px !important;
    }
}

这种行为可能是什么原因？

-更新：以下是根据@Benr89 的评论修改后的代码。在其他任何地方，表格看起来都很好，但在 Gmail iPhone 应用程序中，第二行中间出现了两行 [照片] (cllrart.com/wp-content/uploads/2017/03/IMG_4425.png)

<table class="td" cellspacing="0" cellpadding="6" style="width: 100%; font-family: 'Lucida Sans', 'Lucida Sans Unicode', 'Lucida Grande',
sans-serif; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; border: 1px solid #eee; border-spacing: 0 !important; border-collapse: collapse !important; table-layout: auto; margin: 0 auto !important; color: #333333;" border="10">
<thead><tr>
<th class="td" scope="col" style="text-align: left; font-size: 11px; color: #333333; border: 1px solid #eee; padding: 12px;">Product</th>
            <th class="td" scope="col" style="text-align: left; font-size: 11px; color: #333333; border: 1px solid #eee; padding: 12px;">Quantity</th>
            <th class="td" scope="col" style="text-align: left; font-size: 11px; color: #333333; border: 1px solid #eee; padding: 12px;">Price</th>
        </tr></thead>
<tbody style="font-size: 11px;"><tr class="order_item">
<td class="td" style="text-align: left; vertical-align: middle; border: 1px solid #eee; font-family: ; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; padding: 12px;" lucida sans unicode grande sans-serif word-wrap:break-word>CLLR Issue
1<br><small></small>
</td>
            <td class="td" style="text-align: left; vertical-align: middle; border: 1px solid #eee; font-family: ; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; padding: 12px;" lucida sans unicode grande sans-serif>2</td>
            <td class="td" style="text-align: left; vertical-align: middle; border: 1px solid #eee; font-family: ; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; padding: 12px;" lucida sans unicode grande sans-serif><span class="woocommerce-Price-amount
amount"><span class="woocommerce-Price-currencySymbol">£</span>24.00</span></td>
        </tr></tbody>
<tfoot>
<tr>
<th class="td" scope="row" colspan="2" style="text-align: left; font-size: 11px; border-top-width: 4px; color: #333333; border: 1px solid #eee; padding: 12px;">Subtotal:</th>
                        <td class="td" style="text-align: left; font-size: 11px; border-top-width: 4px; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; border: 1px solid #eee; padding: 12px;"><span class="woocommerce-Price-amount
amount"><span class="woocommerce-Price-currencySymbol">£</span>24.00</span></td>
                    </tr>
<tr>
<th class="td" scope="row" colspan="2" style="text-align: left; font-size: 11px; color: #333333; border: 1px solid #eee; padding: 12px;">Shipping:</th>
                        <td class="td" style="text-align: left; font-size: 11px; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; border: 1px solid #eee; padding: 12px;">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>3.90</span> <small class="shipped_via">via Royal Mail 1st Class Signed for</small>
</td>
                    </tr>
<tr>
<th class="td" scope="row" colspan="2" style="text-align: left; font-size: 11px; color: #333333; border: 1px solid #eee; padding: 12px;">Payment Method:</th>
                        <td class="td" style="text-align: left; font-size: 11px; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; border: 1px solid #eee; padding: 12px;">Stripe</td>
                    </tr>
<tr>
<th class="td" scope="row" colspan="2" style="text-align: left; font-size: 11px; color: #333333; border: 1px solid #eee; padding: 12px;">Total:</th>
                        <td class="td" style="text-align: left; font-size: 11px; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; border: 1px solid #eee; padding: 12px;"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>27.90</span></td>
                    </tr>
</tfoot>
</table>

【问题讨论】：

介意也发布代码..？
@MasivuyeCokile 感谢您的评论。我不确定要上传代码的哪些部分；什么最有帮助？
上传邮件垃圾文件
@MasivuyeCokile 我刚刚上传了它们。如果您还需要什么，请告诉我。
你所有的样式都是内联的？

标签： php html css email woocommerce

【解决方案1】：

首先，在您的起始表格中设置border="0"。

您的主要问题是您在某些表格单元格上使用 0.5px 作为边框大小。将这些更改为 1px，您的边框就可以了。

我在下面添加了您的新代码，我在 Litmus 中进行了测试，一切正常 :)

编辑 - 下面添加了新代码----------------------------------------- --------

好的，由于某种原因，您的起始表中有border="10"，这是无效的，所以我已更改为0。您的css 中有各种错误。例如，空的字体系列标签（您将值留在“”之外）。

我还删除了表头和表尾部分，因为它们在电子邮件中根本不需要。

坚持使用 table、tr 和 td。（您可能需要仔细检查并删除 th 标签，因为它们不是必需的，只需使用 td 代替。）

无论如何，这应该可以修复您的电子邮件 - 我无法在 gmail Iphone 应用程序上对其进行测试，因为 Litmus 不提供支持。而且我没有 Iphone 我是 android 用户。

     <table class="td" cellspacing="0" cellpadding="6" style="width: 100%; font-family: 'Lucida Sans', 'Lucida Sans Unicode', 'Lucida Grande',
sans-serif; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; border: 1px solid #eee; border-spacing: 0 !important; border-collapse: collapse !important; table-layout: auto; margin: 0 auto !important; color: #333333;" border="1">
    <tbody style="font-size: 11px;">
        <tr>
            <th class="td" scope="col" style="text-align: left; font-size: 11px; color: #333333; border: 1px solid #eee; padding: 12px;">Product</th>
            <th class="td" scope="col" style="text-align: left; font-size: 11px; color: #333333; border: 1px solid #eee; padding: 12px;">Quantity</th>
            <th class="td" scope="col" style="text-align: left; font-size: 11px; color: #333333; border: 1px solid #eee; padding: 12px;">Price</th>
        </tr>

        <tr class="order_item">
            <td class="td" style="text-align: left; vertical-align: middle; border: 1px solid #eee; font-family:lucida sans unicode grande sans-serif ; mso-table-rspace: 0pt !important; color: #333333; padding: 12px; word-wrap:break-word">
                CLLR Issue
                1<br><small></small>
            </td>
            <td class="td" style="text-align: left; vertical-align: middle; border: 1px solid #eee; font-family:'Lucida Sans', 'Lucida Sans Unicode', 'Lucida Grande' ; mso-table-rspace: 0pt !important; color: #333333; padding: 12px;" lucida sans unicode grande sans-serif>2</td>
            <td class="td" style="text-align: left; vertical-align: middle; border: 1px solid #eee; font-family:'Lucida Sans', 'Lucida Sans Unicode', 'Lucida Grande' ; mso-table-lspace: 0pt !important; color: #333333; padding: 12px;">
                <span class="woocommerce-Price-amount
amount"><span class="woocommerce-Price-currencySymbol">£</span>24.00</span>
            </td>
        </tr>
        <tr>
            <th class="td" scope="row" colspan="2" style="text-align: left; font-size: 11px; border-top-width: 4px; color: #333333; border: 1px solid #eee; padding: 12px;">Subtotal:</th>
            <td class="td" style="text-align: left; font-size: 11px; border-top-width: 4px; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; border: 1px solid #eee; padding: 12px;">
                <span class="woocommerce-Price-amount
amount"><span class="woocommerce-Price-currencySymbol">£</span>24.00</span>
            </td>
        </tr>
        <tr>
            <th class="td" scope="row" colspan="2" style="text-align: left; font-size: 11px; color: #333333; border: 1px solid #eee; padding: 12px;">Shipping:</th>
            <td class="td" style="text-align: left; font-size: 11px; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; border: 1px solid #eee; padding: 12px;">
                <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>3.90</span> <small class="shipped_via">via Royal Mail 1st Class Signed for</small>
            </td>
        </tr>
        <tr>
            <th class="td" scope="row" colspan="2" style="text-align: left; font-size: 11px; color: #333333; border: 1px solid #eee; padding: 12px;">Payment Method:</th>
            <td class="td" style="text-align: left; font-size: 11px; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; border: 1px solid #eee; padding: 12px;">Stripe</td>
        </tr>
        <tr>
            <th class="td" scope="row" colspan="2" style="text-align: left; font-size: 11px; color: #333333; border: 1px solid #eee; padding: 12px;">Total:</th>
            <td class="td" style="text-align: left; font-size: 11px; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; border: 1px solid #eee; padding: 12px;"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>27.90</span></td>
        </tr>
    </tbody>
</table>

【讨论】：

感谢您的回答！我已将边框大小更改为 1px，并将边框颜色始终设置为 #eee。其他一切看起来都很好，但在第二行中间仍然出现两条线 [照片] (cllrart.com/wp-content/uploads/2017/03/IMG_4425.png) 为什么会是...？
它们只出现在 Gmail 应用中
你能重新发布你的完整代码吗，我的没有同样的问题。谢谢
我已经上传了修改后的代码。非常感谢。 @Benr89