Question

这篇精彩的文章描述了如何创建响应式表格，这些表格非常适合移动浏览器。

现在我正在尝试将相同的技术应用于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->Mail此页内容以创建HTML电子邮件
调整电子邮件窗口的大小以注意表格如何仍然正确调整大小
将电子邮件发送给自己并打开。
现在请注意电子邮件确实如何响应媒体查询但未成功重新设置表格。

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

Answer 1

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

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

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

<强> HTML

<table class="deviceWidth" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; ">
  <tr>
    <td width="50%" 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" alt="" border="0" style="display: block; width:100%; height:auto;" /></a>  
      </p>                  
    </td>
    <td width="50%" align="left" class="full">
        <a href="#"><img src="http://placehold.it/440x440&text=RIGHT" alt="" 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表示，如果屏幕宽度小于640px，那么td类full的{{1}}应display:block width:100%。

现在，让我们有点发型。有时您会希望左侧的列与右侧的列相邻。为此，我们可以在包含dir="rtl"的{{1}}上使用table来翻转列的顺序。 CSS保持不变，这是新的HTML：

<强> HTML

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

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

以下是full HTML and CSS，附有Gmail和iOS 5的屏幕截图。

Gmail iOS 5 Android 4

Answer 2

我建议您参考：http://www.campaignmonitor.com/css/

虽然不是最新的，但它在电子邮件的CSS支持方面是一个很好的资源。不幸的是，在构建电子邮件模板时，您不仅要考虑浏览器，还要考虑不同的客展望和他们提供的CSS支持是众所周知的差。

最重要的是，像gmail这样的邮件提供商倾向于剥离文档的某些部分（例如头标记），因此将任何响应式设计概念应用于支持率很低的受众（电子邮件客户端）变得非常困难甚至基本的CSS。

Answer 3

我能够使它工作，这是结果： 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%;
}

Answer 4

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

Answer 5

我有完全相同的问题！我认为它只适用于iOS设备上的Mail，但它恰好发生在您所说的内容上 - 直到您实际发送它为止。

@Luca，我们知道支持不是很好，但大多数人都忽略了媒体查询，因此如果您希望电子邮件在现代电子邮件客户端上看起来更好一点，那么添加它会很好。如果没有媒体查询/响应表，Outlook和其他人仍然可以获得“普通”HTML电子邮件。

Answer 6

我发现使用媒体查询来堆叠移动设备的td元素，比如

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

似乎适用于大多数设备，但Windows Phone 7除外，它显然不支持display：block属性。

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

6 个答案: