如何在 HTML 电子邮件中创建可扩展列？答案

【问题标题】：How Can I Create Expandable Columns in HTML email?如何在 HTML 电子邮件中创建可扩展列？
【发布时间】：2014-03-21 19:06:06
【问题描述】：

我正在设计两列 HTML 电子邮件，并使用侧边栏样式作为基础（可在此处找到：http://zurb.com/ink/templates.php）。我的问题是，当右侧的内容结束时，我找不到使文本列扩展到全宽的方法。到目前为止，无论我做什么，一旦侧边栏的内容结束，我最终会在左侧有一个巨大的文本列，在右侧有一个空白区域。如何让左栏在侧边栏下方展开到完整？显然它是一个响应式模板，所有 CSS 都需要内联（因为 Gmail 很烂，不会读取 <style> 标签）

非常感谢任何帮助！

【问题讨论】：

Gmail 是您最不必担心的事情......还有更糟糕的电子邮件客户端仍在使用中。
@FDL 和 Outlook 一样，出于某种奇怪的原因，他们仍在使用 Word 渲染引擎 :)
请提供邮政编码和截图。如果没有发现问题，我们将无法帮助进行故障排除。

标签： html css html-table html-email

【解决方案1】：

没有办法完全按照您的要求进行操作，我认为这是扩展包含文本的<td>，以便在侧边栏停止后文本流畅地流入可用空间。 <td> 列在每一行中的宽度始终相同，除非您在它们上设置 colspan (html) 属性。因此，您只需在 td 上使用 colspan=2 创建一个新行，并将文本拆分到尽可能靠近侧边栏结束的位置。

【讨论】：

【解决方案2】：

理论上，下面的代码可以工作。不需要内联 CSS。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td align="left" valign="top">
        <table width="70" align="right" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td bgcolor="#00CCCC">
                    <br>
                    <strong>Sidebar</strong>
                    <br>
                    <br>
                </td>
            </tr>
        </table>
        Elit wayfarers organic single-origin coffee pour-over tote bag. Sustainable Vice blog tattooed, fap twee ea church-key 3 wolf moon quinoa nisi Banksy hashtag. High Life biodiesel sustainable fanny pack. Pop-up meggings photo booth master cleanse in, readymade Echo Park laboris wayfarers cardigan pickled chillwave quis yr. Gastropub pug farm-to-table slow-carb, nostrud Cosby sweater magna kitsch officia gluten-free shabby chic voluptate cardigan actually. Culpa keytar whatever aliqua nisi Neutra. Messenger bag aesthetic asymmetrical, mumblecore disrupt chillwave swag.
        <br><br>
        Austin et street art, semiotics salvia nisi non velit fugiat cornhole laborum freegan polaroid. Trust fund bicycle rights Bushwick, adipisicing twee meh aliquip hoodie irony. Consectetur gastropub flexitarian, art party id Marfa meggings blog freegan banjo chillwave sunt gentrify post-ironic American Apparel. Biodiesel PBR&B swag tote bag stumptown exercitation Tonx, shabby chic consectetur locavore Godard quis. Occaecat VHS Helvetica pop-up synth, accusamus Pitchfork. Chia elit et nihil, yr literally roof party Odd Future PBR&B sartorial duis synth reprehenderit chillwave. Banksy jean shorts chillwave, seitan ex Echo Park PBR Pinterest sriracha forage lo-fi asymmetrical.
    </td>
</tr>
</table>

【讨论】：