HTML Outlook电子邮件中CSS表格列自适应宽度

Question

我正在尝试在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>

预期结果如下： 实际可视化效果如下：

- Aneta Gelova

---

完成后，不要忘记在不同版本的电子邮件客户端中进行测试（不同版本的Outlook可能会显示您代码的不同样式）。 - smilyface

HTML邮件是最糟糕的。总是不得不做一些可怕的hacky事情来解决换行问题，像这样...，使用 来创建空格，例如：Go to platform。下一个需要解决的问题是文本上方仍然存在额外的空间。表格单元格被某种方式拉伸了。我确实有一种感觉，可以用更少的hacky方法来实现你想要的效果。 - misterManSam

Answer 1

增加td标签的宽度可以帮助您将内容调整为一行。

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

如果您想占用容器的全部宽度，请将td宽度设置为auto。

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

- K.S

---

按钮内容不是静态的，所以长度是可变的。我的工作基于这个问题的答案 https://dev59.com/0G445IYBdhLWcg3wpb4P。不幸的是，在 Outlook 中无法工作。 - Aneta Gelova