响应式 HTML 电子邮件表格在 Outlook 中未正确显示答案

【问题标题】：Responsive HTML Email Tables Not Appearing Correctly in Outlook响应式 HTML 电子邮件表格在 Outlook 中未正确显示
【发布时间】：2015-03-14 01:04:47
【问题描述】：

在我做出自己的贡献之前，我将犯下主要的互联网罪并要求你做一些事情，所以请接受毫无保留的道歉。

但在我看来，Outlook 让我很痛苦。

这是我的代码：

<table class="100p" border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns" >
    <tr>
        <td align="center" valign="top">
            <table align="left" border="0" cellpadding="10" cellspacing="0" width="300" class="templateColumnContainer">
                <tr>
                    <td class="leftColumnContent">
                        <img class="emailImage" src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="leftColumnContent">
                        <h1>Left Column</h1>
                        Lorem ipsum dolor sit amet.
                    </td>
                </tr>
            </table>
			
			
			<table align="right" border="0" cellpadding="10" cellspacing="0" width="300" class="templateColumnContainer">
                <tr>
                    <td class="rightColumnContent">
                        <img class="emailImage" src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="rightColumnContent">
                        <h1>Right Column</h1>
                        Lorem ipsum dolor sit amet.
                    </td>
                </tr>
            </table>

        </td>
    </tr>
</table>
<br>

我的问题是，在浏览器和 Outlook 以外的电子邮件客户端中，表格的内容会根据屏幕大小成行显示或堆叠显示。

但在 Outlook 中并非如此。我的“右栏”显示在“左栏”下方并向右对齐。

我可以做些什么来使 Outlook 保持一致？

再次感谢和抱歉，如果这是一个重复出现的问题，我很感激它可能会令人恼火！

约瑟夫

【问题讨论】：

标签： responsive-design fluid-layout

【解决方案1】：

您将两个表放在一列中。以</td><td> 结束第一个表，将两个表分隔为不同的列

<table class="100p" border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns" >
    <tr>
        <td align="center" valign="top">
            <table align="left" border="0" cellpadding="10" cellspacing="0" width="300" class="templateColumnContainer">
                <tr>
                    <td class="leftColumnContent">
                        <img class="emailImage" src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="leftColumnContent">
                        <h1>Left Column</h1>
                        Lorem ipsum dolor sit amet.
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <table align="right" border="0" cellpadding="10" cellspacing="0" width="300" class="templateColumnContainer">
                <tr>
                    <td class="rightColumnContent">
                        <img class="emailImage" src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="rightColumnContent">
                        <h1>Right Column</h1>
                        Lorem ipsum dolor sit amet.
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<br>

【讨论】：