是否有可能使用display：对TD块在HTML电子邮件，实现响应表的设计？(Is it possi

这个奇妙的文章介绍如何创建惊人扩展到移动浏览器响应表。

现在，我想采用同样的技术，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电子邮件
调整电子邮件窗口注意如何表仍然正确调整大小
发送电子邮件给自己，并打开它。
现在注意的电子邮件确实是如何回应媒体查询，但没有成功restyles表。

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

Answer 1:

该接受的答案提供了一些伟大的信息，但它并不能直接解决的问题。最近我一直在尝试与响应的邮件，并拿出一些好的解决方案，其他人可能会发现有用的。开始了...

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

这里是你展示如何做一个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]选择阻止雅虎从渲染媒体查询。在body我的电子邮件的元素有一个yahoo="fix"属性。

上述CSS说，如果屏幕是小于640像素的宽度，则td s的一个类的full应display:block与width:100%

现在，让我们有点票友。有时候你会想在左边的列堆叠下方右侧的列。要做到这一点，我们可以使用dir="rtl"含上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）。用于画面比640像素较小它显示的第一列（在右侧的列）第一，和第二列第二（左侧的柱）。

下面是完整的HTML和CSS以及Gmail和iOS 5的一个屏幕截图附后。

Answer 2:

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

虽然不是很及时更新，它在对电子邮件的CSS支持方面一个很好的资源。不幸的是建立电子邮件模板时，你需要考虑的不仅是浏览器，但不同的客户端如Outlook和他们所提供的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 。

Answer 5:

我有完全相同的问题！我认为这将只是在邮件工作在iOS设备上，但它发生你说的到底是什么 - 它的工作原理，直到你真正把它。

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

Answer 6:

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

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

似乎与Windows Phone 7的例外，这显然不支持显示大多数设备的工作：块属性。

文章来源: Is it possible to use display:block on td in HTML email, to achieve responsive table design?