是否可以在 HTML 电子邮件中使用 display:block on td 来实现响应式表格设计？

Posted

技术标签:

【中文标题】是否可以在 HTML 电子邮件中使用 display:block on td 来实现响应式表格设计？【英文标题】：Is it possible to use display:block on td in HTML email, to achieve responsive table design? 【发布时间】：2012-06-06 18:08:50 【问题描述】：

这篇精彩的文章描述了如何创建响应式表格，可以惊人地扩展到移动浏览器。

现在我正在尝试将相同的技术应用于 html 电子邮件，但 display:block 似乎不适用于 html 电子邮件。

重现问题：

    将以下代码另存为 HTML 页面：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        @media only screen and (max-width: 760px), screen and (max-device-width: 480px)  
            /* Force table to not be like tables anymore */
            table, td, tbody, tr
                    display: block;
                    width:100%;
                    padding:0;
                    clear:both;
            
            td 
                    /* Behave  like a "row" */
                    position: relative !important;
            
        
    </style>
</head>
<body>
    <table style="width:100%;">
        <tr>
            <td style="border:1px solid red;">1/1</td>
            <td style="border:1px solid red;">1/2</td>
            <td style="border:1px solid red;">1/3</td>
        </tr>
        <tr>
            <td style="border:1px solid red;">2/1</td>
            <td style="border:1px solid red;">2/2</td>
            <td style="border:1px solid red;">2/3</td>
        </tr>
    </table>
</body>
</html>

    在 Safari 中打开页面

    调整窗口大小以注意表格如何随着较小的窗口大小而变化

    按CMD+i或File-&gt;Mail此页面内容创建HTML电子邮件

    调整电子邮件窗口的大小以注意表格如何仍然正确调整大小

    将电子邮件发送给自己并打开。

    现在请注意电子邮件确实如何响应媒体查询但未成功重新设置表格的样式。

我还没有找到真正正确显示表格的电子邮件客户端。这是一个死胡同还是您有解决方法的想法？

【问题讨论】：

听起来像死路一条。 HTML 电子邮件中的 CSS 是出了名的不可靠。 【参考方案1】：

另一种方法是在一封电子邮件中使用两种设计：一种用于桌面阅读器，另一种用于移动阅读器，如demosntrated here。

【讨论】：

【参考方案2】：

接受的答案提供了一些很好的信息，但没有直接解决问题。我最近一直在尝试响应式电子邮件，并提出了一些其他人可能会觉得有用的好的解决方案。来了……

要回答这个问题，您可以使用display:block; 使表格列在某些移动设备（android、ios 和 Kindle）上表现为行。

这是一个示例，展示了如何在移动设备上制作 2 列布局堆栈（左列在右列顶部）。

HTML

<table class="deviceWidth"  cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; ">
  <tr>
    <td  align="right" class="full">
      <p style="mso-table-lspace:0;mso-table-rspace:0; padding:0; margin:0;">
        <a href="#"><img src="http://placehold.it/440x440&text=LEFT"  border="0" style="display: block; width:100%; height:auto;" /></a>  
      </p>                  
    </td>
    <td  align="left" class="full">
        <a href="#"><img src="http://placehold.it/440x440&text=RIGHT"  border="0" style="display: block; width:100%; height:auto;" /></a>                     
    </td>
  </tr>
</table>

CSS

@media only screen and (max-width: 640px)  
    body[yahoo] .deviceWidth width:440px!important;   T 

    body[yahoo] .full 
        display:block;
        width:100%;

注意：body[yahoo] 选择器prevents Yahoo from rendering the media queries。我的电子邮件的body 元素有一个yahoo="fix" 属性。

上面的 CSS 表示，如果屏幕宽度小于 640 像素，则 tds 的类为 full 应该 display:block 和 width:100%。

现在，让我们来点花哨的。有时您会希望左侧的列堆叠在右侧的列下方。为此，我们可以在包含的table 上使用dir="rtl" 来翻转列的顺序。 CSS 保持不变，这是新的 HTML：

HTML

<table class="deviceWidth" dir="rtl"   cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; ">
  <tr>
    <td  dir="ltr" align="right" class="full">
      <p style="mso-table-lspace:0;mso-table-rspace:0; padding:0; margin:0;">
        <a href="#"><img src="http://placehold.it/440x440&text=RIGHT"  border="0" style="display: block; width:100%; height:auto;" /></a> 
      </p>                  
    </td>
    <td  dir="ltr" align="left" class="full">
        <a href="#"><img src="http://placehold.it/440x440&text=LEFT"  border="0" style="display: block; width:100%; height:auto;" /></a>                      
    </td>
  </tr>
</table>

通过添加dir="rtl"，我们告诉它反转列的顺序。第一列（在 HTML 流中）显示在右侧，第二列（在 HTML 中）在左侧。对于小于 640 像素的屏幕，它首先显示第一列（右侧的列），然后显示第二列（左侧的列）。

这里是full HTML and CSS，并附上来自 Gmail 和 iOS 5 的屏幕截图。

【讨论】：

我刚刚通过复制并粘贴到 Litmus 中尝试了您的确切代码，但它似乎并没有在 iPhone 5 中为我堆叠。我还在发送给自己的电子邮件中尝试了这种技术。也许，td 元素上的 display:block 不再适用于 iphone。 @Chanpory - 你确定保留媒体查询吗？一些 ESP 会从标题中删除 ，为了在 iOS 中正常工作， 需要保留在标题中。 原来我错过了&lt;!DOCTYPE&gt; 和&lt;body&gt; 元素！即使有媒体查询和&lt;style&gt;，这也会破坏布局。 #facepalm【参考方案3】：

我发现使用媒体查询来为这样的移动设备堆叠 td 元素

td[class="stack-content"] display:block !important

似乎适用于大多数设备，但 windows phone 7 显然不支持 display: block 属性。

【讨论】：

【参考方案4】：

我能够让它工作，结果如下： https://litmus.com/pub/d9ac198

这是我用来强制 td 表现得像行的代码：

table[class="magic"],
table[class="magic"] tbody,
table[class="magic"] tr,
table[class="magic"] td 
    display: block !important;
    width: 100%;

【讨论】：

有趣！能否请您发布完整的源代码？ 如果它在 iOS 上不适合您，答案就在这里。您需要在表格行 (tr) 和单元格 (td) 上设置 display: block 和 width: 100%。我花了很长时间才看到它，即使它就在我面前：|【参考方案5】：

我遇到了同样的问题！我认为它只适用于 iOS 设备上的 Mail，但它确实如您所说 - 在您实际发送之前一直有效。

@Luca，我们知道支持不是很好，但媒体查询被大多数人忽略，所以如果您希望电子邮件在现代电子邮件客户端上看起来更好一点，添加它是一个不错的选择。 Outlook 和其他人仍然会收到“正常”的 HTML 电子邮件，但没有媒体查询/响应表。

【讨论】：

【参考方案6】：

我建议你参考这个：http://www.campaignmonitor.com/css/

虽然不是最新的，但它在电子邮件的 css 支持方面是一个很好的资源。不幸的是，在构建电子邮件模板时，您不仅需要考虑浏览器，还需要考虑不同的客户端，例如Outlook 和他们提供的 CSS 支持是出了名的差。

最重要的是，像 gmail 这样的邮件提供商往往会删除文档的某些部分（例如头部标签），因此很难将任何响应式设计概念应用于支持非常差的受众（电子邮件客户端）即使是基本的 CSS。

【讨论】：

以上是关于是否可以在 HTML 电子邮件中使用 display:block on td 来实现响应式表格设计？的主要内容，如果未能解决你的问题，请参考以下文章

是否可以像 Outlook RTF/TNEF 那样在 html 电子邮件中嵌入非图像附件？

是否可以在不使用 MIME 的情况下使用包含 CSS 装饰的 PHP 发送 html 电子邮件？

如何在html中自动发送电子邮件[关闭]

是否可以在 MAILTO 链接的正文中添加 HTML 链接 [重复]

使用 HTML 发送邮件 [重复]

HTML 电子邮件中的背景图像