如何让 <td> 在电子邮件模板中从内联变为阻止答案

【问题标题】：How can I get a <td> to go from inline to block within an email template如何让 <td> 在电子邮件模板中从内联变为阻止
【发布时间】：2023-03-31 08:50:01
【问题描述】：

在桌面电子邮件客户端上，我希望我的 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>

但是，在移动视图上。

使用媒体查询。我想把它们做成全宽/块，当屏幕宽度达到 600 像素时，一个在另一个之上。但这似乎不起作用。我已经尝试了各种各样的东西。制作这些 table 而不是 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>

有谁知道这样做的好方法吗？

【问题讨论】：

标签： html css email html-table html-email

【解决方案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 条件放在桌面断点上以创建桌面版本。

【讨论】：

Gortonington 这是一个绝妙的主意。你救了我一天。 :)

【解决方案2】：

感谢大家的帮助。

总的来说，我找到了这个链接： 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;

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

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

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

【讨论】：

【解决方案3】：

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

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

<!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>

【讨论】：

有可能，但如果我没记错宽度：100% 必须设置为 !important 以覆盖内联样式。
是的表格块布局，在上面的css宽度上使用!important应该可以解决问题

【解决方案4】：

我会远离表格，而是使用 Bootstrap 之类的东西创建自己的“块”。或者更好的是，它只是像响应式网格系统这样的网格系统。

如果您要使用表格来执行此操作，则需要使用媒体查询来告诉浏览器如何“重新布局”特定大小的内容。 Google 搜索“CSS 媒体查询”应该会告诉您所有您需要知道的信息，并且媒体查询适用于大多数浏览器。

【讨论】：

但这是一个电子邮件模板。

【解决方案5】：

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

例子：

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

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

【讨论】：

我没有提到我有一个媒体查询。那是我的错，我道歉。但我确实有一个。让我编辑它。此外，正如标题所说，这是一个电子邮件模板。因此媒体查询并非在所有浏览器上都有效。