3

I'm trying to make a centralize button in HTML e-mail. The tricky part here is my wish the button to be as wide as its content. The following code works perfect except in Outlook.

Here is the 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>

The expected result is:

The actual visualization:

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Aneta Gelova
  • 31
  • 3
  • Once done, don't forgot to test in different versions of the email clients (Different versions of outlook may show different styles of your code). – smilyface Jan 04 '19 at 14:00
  • html emails are the worst. Always have to do horrible hacky things like... this... to fix your wrapping issue, put ` ` to create your spaces like this: `Go to platform`. Next thing to fix is the extra space that is still there above the text. The table cell is being stretched somehow. I do have a feeling there is a less hacky way to achieve what you want though. – misterManSam Jan 04 '19 at 15:17

1 Answers1

1

Increasing the width of the td tag will help you adjust the content in one line. 

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

if you want to take the full width of the container, make td width auto.

currently, td tag width is deciding how the content text will wrap.

K.S
  • 395
  • 3
  • 14
  • The button content is not static so the length is variable. My work is based on answers for this question https://stackoverflow.com/questions/4757844/css-table-column-autowidth. Unfortunately doesn't work for Outlook. – Aneta Gelova Jan 04 '19 at 08:18