HTML Outlook 电子邮件中的 CSS 表格列自动宽度答案

【问题标题】：CSS table column autowidth in HTML Outlook e-mailHTML Outlook 电子邮件中的 CSS 表格列自动宽度
【发布时间】：2019-05-30 18:24:34
【问题描述】：

我正在尝试在 HTML 电子邮件中创建一个集中按钮。这里棘手的部分是我希望按钮与其内容一样宽。除了在 Outlook 中，以下代码完美运行。

这是 HTML：

<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td></td>
            <td style="width:1%;white-space:nowrap">
                <a href="#" style="text-decoration:none">
                    <table width="100%" border="0" cellpadding="0" cellspacing="0">
                        <tbody>
                            <tr>
                                <td align="center" style="margin-top:16px;padding:8px 16px 8px 16px;background-color:#5091cd;border-radius:2px">
                                    <a href="#" style="font-size:15px;letter-spacing:.04em;color:#ffffff;text-transform:uppercase;text-decoration:none;display:block;text-align:center;max-width:600px;overflow:hidden;text-overflow:ellipsis">
                                        Go to platform
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </a>
            </td>
            <td></td>
        </tr>
    </tbody>
</table>

预期结果是：

实际可视化：

【问题讨论】：

完成后，别忘了在不同版本的电子邮件客户端中进行测试（不同版本的 Outlook 可能会显示不同样式的代码）。
html 电子邮件是最糟糕的。总是要做一些可怕的骇人听闻的事情，比如......这个......要解决您的包装问题，请输入&nbsp; 来创建您的空间，如下所示：Go&nbsp;to&nbsp;platform。接下来要修复的是文本上方仍然存在的额外空间。表格单元格以某种方式被拉伸。我确实觉得有一种不那么老套的方法来实现你想要的。

标签： css button html-table outlook html-email

【解决方案1】：

增加td标签的宽度会帮助你调整一行内容。

<style="width:20%;white-space:nowrap">

如果你想获取容器的整个宽度，请将 td width 设为 auto。

目前，td 标签宽度决定了内容文本的换行方式。

【讨论】：

按钮内容不是静态的，所以长度是可变的。我的工作是基于这个问题的答案stackoverflow.com/questions/4757844/css-table-column-autowidth。很遗憾，它不适用于 Outlook。