如何在无法使用外部 CSS 文件时使 HTML table 响应电子邮件模板

Question

我创建了一个使用两栏布局的电子邮件模板。这是我的方法：

<table>
    <tr>
      <td colspan="2" align="center">
          <h1>Header of my email template</h1>
      </td>
    </tr>
    <tr>
        <td>
            <img src="image1.jpg" alt="Image 1" />
        </td>
        <td>
            <img src="image2.jpg" alt="Image 2" />
        </td>
    </tr>
    <tr>
      <td colspan="2" align="center">
          <p>Footer of my email template</p>
      </td>
    </tr>
</table>

它在桌面上运行得很好！我有一个完全符合我要求的两列布局。问题出在手机上，因为屏幕对于两列布局来说太小了。对于移动设备，我每行需要一张图片，而不是两张。我可以做的是对包含图像的 <td> 元素使用 float:left;width:100%，这样我就有了我需要的一列布局。但是，例如 float:left;width:100% 应该仅在 @media screen and (max-width:450px) 时适用。但是没有办法使用内联CSS来使用@media screen and (max-width:450px)。请记住，这是针对电子邮件模板的。所以我无法调用外部 CSS 文件或将 CSS 添加到页面的 <head>，因为这是将为电子邮件模板发送的代码。

我在 https://kb.benchmarkemail.com/using-css-in-html-emails/ 找到了这个建议，但这不是响应表的解决方案：

Things To Do

Use tables for layout. Tables are more consistently supported. We recommend that you place your CSS code inline to your content. It should look something like this: Your content here.... Declare width, cellpadding, and cellspacing for all tables and table cells. This will result in a fixed width for the template. Use hspace and vspace tag attributes to add whitespace around an image. Margin and padding inline styles are supported by most, but not all email clients

有什么想法吗？谢谢。

Answer 1

因为 table 元素是块级的，我会说将那些 tds 更改为嵌套的 tables 就像它是 1999 年一样，然后 float 第一个还剩一个：

<table>
    <tr>
      <td colspan="2" align="center">
          <h1>Header of my email template</h1>
      </td>
    </tr>
    <tr>
        <td>
            <table style="float:left;">
                <tr>
                    <td>
                        <img src="image1.jpg" alt="Image 1" />
                    </td>
                </tr>
            </table>
            <table>
                <tr>
                    <td>
                    <img src="image2.jpg" alt="Image 2" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
      <td colspan="2" align="center">
          <p>Footer of my email template</p>
      </td>
    </tr>
</table>

Answer 2

Google 提供 CSS 支持：https://developers.google.com/gmail/design/css 正如 A. Meshu 在他对我的问题的评论中指出的那样。

我在 https://templates.mailchimp.com/development/responsive-email/ 发现他们是这样说的：

"You can leave the media query styles in the <head> of your email, as clients that support media queries don’t strip out the <head> or <style> areas."

这让我觉得我必须发送完整的 <HTML> 文件，所以我什至包括了 <html><head><style type="text/css">..........</style></head><body>...........</body></html>。

对于我的其他电子邮件模板，我只发送 <body> 的代码。我以 <div> 开始模板，一切正常。但是对于这个模板，我现在使用的是这个结构：

<html>
<head>
<style type="text/css">
@media screen and (max-width:450px) {
    .responsive {
        float:left!important;
        width:100%!important
    }
}
</style>
</head>
<body>
..........
</body>
</html>

感谢 A. Meshu 在他对我的问题的评论中提供了非常重要的提示。

如何在无法使用外部 CSS 文件时使 HTML table 响应电子邮件模板

How to make HTML table responsive for email template when using an external CSS file is not a possibility

html

css

email-templates

css-tables

responsive-design