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

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>

但是，在移动 View 上。

使用媒体查询。我想把它们做成全宽/ block ，当屏幕宽度达到 600px 时，一个在另一个之上。但这似乎不起作用。我尝试过各种各样的事情。制作这些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>

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

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 上的显示 block ，因此您可以使用 TH 来解决此问题。但这在 Gmail 应用程序中可能不起作用，因为它无法识别样式标签，因此您可能需要先创建移动设备，然后将媒体查询或最大宽度以及 MSO 条件放在桌面断点上以创建桌面版本。