响应式电子邮件，创建 HTML 表格

【问题标题】：Responsive email, creating an HTML table响应式电子邮件，创建 HTML 表格
【发布时间】：2016-11-20 00:39:18
【问题描述】：

我正在为活动监视器制作响应式 eDM，使用 Litmus 作为测试工具。

我在获得如下图所示的表格时遇到了一些麻烦。

我当前的代码如下所示。整个文档大小为600px，这个表格需要居中540px。

<table border="0" cellspacing="0" cellpadding="0" class="content" align="center">
<tr>
  <td colspan="3">
    <table width="100%" bgcolor="#ffffff">
      <tr>
        <td class="gutter">&nbsp;</td>
        <td class="spacer-medium">&nbsp;</td>
        <td class="gutter">&nbsp;</td>
      </tr>
      <tr>
        <td class="gutter">&nbsp;</td>


          <tr width="540" height="148" style="background-image: url('rectangle.png'); background-size:100% 100%; background-repeat: no-repeat; width: 540px; padding-top:20px; padding-left:20px; padding-right:10px;color: #ffffff; font-family: Arial, Helvetica; font-size: 14px; line-height: 20px;" class="__not-plain-text gradient__image centre" background="rectangle.png" bgcolor="#f36d00">

          <td width="400" align="left" style="float:left; width:400px; font-weight:bold;">TEXT GOES HERE AS BOLD</td>
          <td width="400" align="left" style="float:left; width:400px;">LONGER PARAGRAPH TO GO HERE AS NORMAL</td>
          <td><img src="images/man2.png" align="right" alt="offer" width="109" style="width: 109px; float:right padding-right:10px" class="__not-plain-text"></td>
            </tr>
      </tr>
    </table>
   </td>
</tr>

任何帮助将不胜感激！谢谢。

【问题讨论】：

  • 我建议您查看 Zurb 的电子邮件基金会：foundation.zurb.com/emails/docs（这不能解决您的问题，但由于您只是“开始”，它可能是创建一个更好的方法电子邮件模板）

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


【解决方案1】：

为了以 Niklas Fett 的回答为基础，我采用了他的代码并更新了您的电子邮件宽度。这是响应式电子邮件设计（针对支持@media 查询的电子邮件客户端）和混合电子邮件设计（针对不支持媒体查询的电子邮件客户端）的组合。这有点复杂，但您可以使用下面的 sn-p 建立您的电子邮件。

还要注意正确嵌套的&lt;table&gt; 标签：您不能将&lt;tr&gt; 直接嵌套在&lt;td&gt; 内。

@media screen and (max-width: 600px) {

            /* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
            .fluid,
            .fluid-centered {
                width: 100% !important;
                max-width: 100% !important;
                height: auto !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }
            /* And center justify these ones. */
            .fluid-centered {
                margin-left: auto !important;
                margin-right: auto !important;
            }

            /* What it does: Forces table cells into full-width rows. */
            .stack-column,
            .stack-column-center {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                direction: ltr !important;
            }
            /* And center justify these ones. */
            .stack-column-center {
                text-align: center !important;
            }
        
            /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
            .center-on-narrow {
                text-align: center !important;
                display: block !important;
                margin-left: auto !important;
                margin-right: auto !important;
                float: none !important;
            }
            table.center-on-narrow {
                display: inline-block !important;
            }
<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;" background="rectangle.png">
<tr>
	                <!-- dir=rtl : This can be changed to dir=ltr to swap the alignment on wide while maintaining stack order on narrow. -->
                    <td dir="rtl" align="center" height="100%" valign="top" width="100%" style="padding: 10px 0;">
                        <!--[if mso]>
                        <table border="0" cellspacing="0" cellpadding="0" align="center" width="600">
                        <tr>
                        <td align="center" valign="top" width="600">
                        <![endif]-->
                        <table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:600px;">
                            <tr>
                                <td align="center" valign="top" style="font-size:0; padding: 10px 0;">
                                    <!--[if mso]>
                                    <table border="0" cellspacing="0" cellpadding="0" align="center" width="600">
                                    <tr>
                                    <td align="left" valign="top" width="220">
                                    <![endif]-->
                                    <div style="display:inline-block; margin: 0 -2px; max-width: 200px; min-width:160px; vertical-align:top; width:100%;" class="stack-column">
                                        <table cellspacing="0" cellpadding="0" border="0" width="100%">
                                            <tr>
                                                <td dir="ltr" style="padding: 0 10px 10px 10px;">
                                                    <img src="http://placehold.it/200" width="200" alt="" style="border: 0;width: 100%;max-width: 200px;" class="center-on-narrow">
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <!--[if mso]>
                                    </td>
                                    <td align="left" valign="top" width="440">
                                    <![endif]-->
                                    <div style="display:inline-block; margin: 0 -2px; max-width:66.66%; min-width:320px; vertical-align:top;" class="stack-column">
                                        <table cellspacing="0" cellpadding="0" border="0" width="100%">
                                            <tr>
                                                <td dir="ltr" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px 10px 0; text-align: left;" class="center-on-narrow">
                                                    <strong style="color:#111111;">Class aptent taciti sociosqu</strong>
                                                    <br><br>
                                                    Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <!--[if mso]>
                                    </td>
                                    </tr>
                                    </table>
                                    <![endif]-->
                                </td>
                            </tr>
                        </table>
                        <!--[if mso]>
                        </td>
                        </tr>
                        </table>
                        <![endif]-->
                    </td>
                </tr>
                </table>

【讨论】：

    【解决方案2】：

    这个问题的解决方案有点复杂。您将需要大量代码来确保您的邮件将在大多数邮件客户端中正确显示。尝试在这个 sn-p 中工作，我在 JSfiddle 中设置，因为它非常长：

    https://jsfiddle.net/ojyr085t/

    或者这里的代码：

    <style>
@media screen and (max-width: 480px) {

            /* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
            .fluid,
            .fluid-centered {
                width: 100% !important;
                max-width: 100% !important;
                height: auto !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }
            /* And center justify these ones. */
            .fluid-centered {
                margin-left: auto !important;
                margin-right: auto !important;
            }

            /* What it does: Forces table cells into full-width rows. */
            .stack-column,
            .stack-column-center {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                direction: ltr !important;
            }
            /* And center justify these ones. */
            .stack-column-center {
                text-align: center !important;
            }

            /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
            .center-on-narrow {
                text-align: center !important;
                display: block !important;
                margin-left: auto !important;
                margin-right: auto !important;
                float: none !important;
            }
            table.center-on-narrow {
                display: inline-block !important;
            }
</style>
<html><body>
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="100%" style="max-width: 680px;">
<tr>
                    <!-- dir=rtl is where the magic happens. This can be changed to dir=ltr to swap the alignment on wide while maintaining stack order on narrow. -->
                    <td dir="rtl" bgcolor="#ffffff" align="center" height="100%" valign="top" width="100%" style="padding: 10px 0;">
                        <!--[if mso]>
                        <table border="0" cellspacing="0" cellpadding="0" align="center" width="660">
                        <tr>
                        <td align="center" valign="top" width="660">
                        <![endif]-->
                        <table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:660px;">
                            <tr>
                                <td align="center" valign="top" style="font-size:0; padding: 10px 0;">
                                    <!--[if mso]>
                                    <table border="0" cellspacing="0" cellpadding="0" align="center" width="660">
                                    <tr>
                                    <td align="left" valign="top" width="220">
                                    <![endif]-->
                                    <div style="display:inline-block; margin: 0 -2px; max-width: 200px; min-width:160px; vertical-align:top; width:100%;" class="stack-column">
                                        <table cellspacing="0" cellpadding="0" border="0" width="100%">
                                            <tr>
                                                <td dir="ltr" style="padding: 0 10px 10px 10px;">
                                                    <img src="http://placehold.it/200" width="200" alt="" style="border: 0;width: 100%;max-width: 200px;" class="center-on-narrow">
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <!--[if mso]>
                                    </td>
                                    <td align="left" valign="top" width="440">
                                    <![endif]-->
                                    <div style="display:inline-block; margin: 0 -2px; max-width:66.66%; min-width:320px; vertical-align:top;" class="stack-column">
                                        <table cellspacing="0" cellpadding="0" border="0" width="100%">
                                            <tr>
                                                <td dir="ltr" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px 10px 0; text-align: left;" class="center-on-narrow">
                                                    <strong style="color:#111111;">Class aptent taciti sociosqu</strong>
                                                    <br><br>
                                                    Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <!--[if mso]>
                                    </td>
                                    </tr>
                                    </table>
                                    <![endif]-->
                                </td>
                            </tr>
                        </table>
                        <!--[if mso]>
                        </td>
                        </tr>
                        </table>
                        <![endif]-->
                    </td>
                </tr>
                </table>
</body></html>

    【讨论】：

    • 嘿，这看起来很眼熟，我敢打赌代码有效 :) tedgoas.github.io/Cerberus
    • 嘿哇，感谢链接源！很久以前保存的，但找不到源！ :)
    猜你喜欢
    • 2020-05-07
    • 1970-01-01
    • 1970-01-01
    • 2016-11-11
    • 2014-07-04
    • 2013-02-16
    • 2013-09-16
    • 2019-12-02
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode