Question

在桌面电子邮件客户端上，我希望 td 元素并排显示。他们做了什么，原本就是 td 的目的。

<table>
  <tbody>
    <tr>
      // These sit side by side in the email client on Desktop
      <td width="300">
        content
      </td>
      <td width="300">
        content
      </td>
    </tr>
  </tbody>
</table>

然而，在移动视图上。

使用媒体查询。我想拍摄这些并使它们成为全宽/块，当屏幕宽度达到600px时，一个在另一个上面。但这似乎并没有起作用。我尝试过各种各样的事情。制作这些表格而不是 td 是一种有效的方法。

然而，它无法在Outlook和其他各种客户端中运行。

<table>
  <tbody>
    <tr>
      // These sit side by side in most email clients on Desktop (not Outlook), and stack on mobile.
      <table>
        content
      </table>
      <table>
        content
      </table>
    </tr>
  </tbody>
</table>

我的第二种方法是使用 tr 并将其显示设置为表格单元格。这也有效，但只有少数几个客户。

<table>
  <tbody>
    <tr>
      // These sit side by side in most email clients on Desktop (not Outlook), and stack on mobile.
      <tr class="display: cell">
        content
      </tr>
      <tr class="display: cell">
        content
      </tr>
    </tr>
  </tbody>
</table>

有没有人知道这样做的好方法？

Answer 1

最好的例子是：

<style>
@media only screen and (max-width: 600px) {
th {width:100% !important; display:block !important;}
}
</style>
<table>
<tr>
<th width="48%">CONTENT</th>
<th width="48%">CONTENT2</th
</tr>
</table>

这是因为Android原生客户端不再识别TD上的显示块，因此您可以使用TH来解决这个问题。这可能无法在Gmail应用中使用，因为它无法识别样式标记，因此您可能需要首先创建移动设备，并在桌面断点上放置媒体查询或最大宽度以及MSO条件以创建桌面版本。

Answer 2

实际上，最好的方法是使用一个表来包装所有“TD”，但是然后在表格的主要TD中放入一堆表而不是多个TD。外部表是一个可用于约束内部表的容器。

此技术适用于所有主要电子邮件客户端。（编辑此评论）

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        @media only screen and (max-width: 479px) {
            .mobile_width {width:100% !important;}
        }
    </style>
</head>
<body>
    <table width="600" class="mobile_width">
        <tr>
            <td>
                <table width="200" align="left" class="mobile_width">
                    <tr><td></td></tr>
                </table>
                <table width="200" align="left" class="mobile_width">
                    <tr><td></td></tr>
                </table>
                <table width="200" align="left" class="mobile_width">
                    <tr><td></td></tr>
                </table>
            </td>
        </tr>
</table>
</body>
</html>

Answer 3

感谢帮助人员。

总的来说，我发现了这个链接： https://blog.jmwhite.co.uk/2014/09/08/turning-floated-tables-columns-outlook/

这对我的问题有很大的帮助。它帮助我意识到我在设计中做错了什么，并向我介绍了mso条件。

原始问题是Microsoft Outlook中添加了大量填充，我不得不使用：

border-collapse: collapse;

与MSO空间风格一起：

mso-table-lspace: 0pt;
mso-table-rspace: 0pt;

这些都是所有表格上的样式定义，以及整个文档中的表格数据标记。

这消除了足够的间距，使我的图像可以并排放置两张桌子。

因此，在这种情况下，我能够使用两个表，在电子邮件中并排放置两个元素，并将它们设置为全宽，以便它们以较小的屏幕尺寸堆叠。

Answer 4

您需要在CSS中查看媒体查询。

示例：

@media all and (max-width:900px) {
    div#example { display: block; }
}

可能提供更好的解决方案：http://jsfiddle.net/7pgdjckr/

Answer 5

我会离开桌子，而是使用像Bootstrap这样的东西来创建你自己的“块”。或者更好的是，特别是像响应网格系统这样的网格系统。

如果您打算使用表格，则需要使用媒体查询来告诉浏览器如何以特定尺寸“重新铺设”内容。 Google搜索“CSS媒体查询”应该告诉您需要了解的所有信息，并且媒体查询可以在大多数浏览器中使用。

如何在电子邮件模板中获取内联到阻止的内容

5 个答案: