用于响应式 HTML 电子邮件的堆叠表答案

【问题标题】：Stacking Tables for a responsive HTML email用于响应式 HTML 电子邮件的堆叠表
【发布时间】：2017-06-23 02:04:25
【问题描述】：

对这封电子邮件的新东西，但我已经搜索和搜索了几天，仍然无法破解这个。我希望在缩小窗口时将这两个图像堆叠起来，并将 BG 变为橙色，如下所示。我有一种感觉，这是我让表格嵌套的方式。

<!DOCTYPE html>
<html lang="en">
<body>
    <head>
        <style type="text/css">
            @media screen and (max-width: 400px) {
                .content {
                    background-color: #DF6618;
                    width: 100% !important;
                    height: auto !important;
                }

                .contentSmall {
                    width: 100%;
                    height: auto;
                }
            }
        </style>
    </head>

        <table width="600px" class="content">
             <tr>
                 <td>
                     <table width="300px" class="contentSmall">
                         <tr>
                             <img src="http://2.bp.blogspot.com/_FkAI_ee_eBA/SASnSymg3fI/AAAAAAAAAIA/E6UODcxSoTY/s400/300px-Helix_nebula.jpg"; width="300"; border="1px";/>
                         </tr>
                     </table>
                 </td>

                 <td>
                     <table width="300px" class="contentSmall">
                         <tr>
                             <img src="http://2.bp.blogspot.com/_FkAI_ee_eBA/SASnSymg3fI/AAAAAAAAAIA/E6UODcxSoTY/s400/300px-Helix_nebula.jpg"; width="300"; border="1px";/>
                         </tr>
                     </table>
                 </td>
            </tr>
        </table>   
    </body>
</html>

【问题讨论】：

首先，我会研究 HTML 语义。图像不是表格数据，不应在表格内使用。我强烈建议您查看引导程序并使用您自己的媒体查询提供必要的附加规则。
我绝对不会将引导程序用于电子邮件。
由于您是“这封电子邮件的新手”，我会查看this chart，它显示了不同客户在 HTML 电子邮件中支持哪些功能。例如，您的所有样式都将被 Gmail 删除，因为它们位于 <head> 部分中。
感谢大家的回复。我认为引导程序会为此过分。此外，由于我什至无法将这些内容叠加到我的浏览器中，我认为现在查看电子邮件客户端问题还为时过早。

标签： html html-table html-email

【解决方案1】：

将表格元素的显示属性更改为块状，如下所示：

        @media screen and (max-width: 400px) {
            .content {
                background-color: #DF6618;
                width: 100% !important;
                height: auto !important;
            }
            table, tbody, tr, th, td {
                display: block
            }
            .contentSmall {
                width: 100%;
                height: auto;
            }
        }

您还可以尝试查看Zurb Ink 以了解响应式电子邮件框架。这里有一些templates，你也可以尝试修改。

【讨论】：