Автоматическая ширина столбца таблицы CSS в электронной почте Outlook Outlook - PullRequest
Новая
       24

Автоматическая ширина столбца таблицы CSS в электронной почте Outlook Outlook

0 голосов
/ 04 января 2019

Я пытаюсь сделать кнопку централизации в электронной почте 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>

Ожидаемый результат:

Фактическая визуализация:

1 Ответ

0 голосов
/ 04 января 2019

Увеличение ширины тега td поможет вам настроить контент в одну строку.

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

если вы хотите взять всю ширину контейнера, сделайте td width auto.

В настоящее время ширина тега td определяет способ переноса текста содержимого.

...