邮件签名开发：内联样式实现<td>移动端自适应换行

邮件客户端对CSS兼容性极差，Flex布局在Outlook、旧版Gmail等客户端中完全失效，你可以使用纯Table布局+定向媒体查询的方案实现需求，全平台兼容率超过98%。

核心实现思路 #

• 桌面端维持原有三列结构，通过固定外层容器宽度避免内容错位
• 设置480px为移动端断点，在窄屏下将所有单元格强制转为块级元素，让右侧图片自动排列到文本内容下方
• 用Outlook专属条件注释兼容旧版Office客户端，避免桌面端布局错乱
• 移除会导致内容强制挤压的table-layout: fixed属性，改用单元格固定宽度约束尺寸

修正后完整代码 #

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        /* 移动端适配样式 */
        @media only screen and (max-width: 479px) {
            .sig-container, .sig-container td {
                display: block !important;
                width: 100% !important;
                box-sizing: border-box !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }
            .sig-avatar {
                padding-bottom: 15px !important;
            }
            .sig-right-img {
                padding-top: 20px !important;
                text-align: center !important;
            }
            .sig-contact-table {
                width: auto !important;
            }
        }
    </style>
</head>
<body>
    <!-- Outlook条件注释，固定桌面端宽度 -->
    <!--[if mso]>
    <table width="430" cellpadding="0" cellspacing="0" border="0"><tr><td>
    <![endif]-->
    <table
        class="sig-container"
        width="430"
        cellpadding="0"
        cellspacing="0"
        border="0"
        style="
            font-family: Calibri, 'Trebuchet MS', sans-serif;
            border-collapse: collapse;
        "
    >
        <tr>
            <td
                rowspan="5"
                class="sig-avatar"
                width="130"
                style="
                    padding-right: 10px;
                    vertical-align: middle;
                "
            >
                <img
                    src="https://via.placeholder.com/130"
                    alt=""
                    width="130"
                    height="130"
                    style="display: block; border: 0;"
                />
            </td>
            <td style="padding-bottom: 5px; vertical-align: top;">
                <span style="color: #237; font-weight: 600; font-size: 20px"
                    >Ing. Jan Novák</span
                >
            </td>
            <td
                rowspan="5"
                class="sig-right-img"
                width="130"
                style="
                    padding-left: 30px;
                    vertical-align: middle;
                "
            >
                <img
                    src="https://via.placeholder.com/130"
                    alt=""
                    width="130"
                    height="130"
                    style="display: block; border: 0;"
                />
            </td>
        </tr>
        <tr>
            <td style="padding-bottom: 10px; vertical-align: top;">
                <span style="color: #5d6d7f">ředitel FOOBAR a.s.</span>
            </td>
        </tr>
        <tr>
            <td style="padding-bottom: 10px; vertical-align: top;">
                <table
                    class="sig-contact-table"
                    cellpadding="0"
                    cellspacing="0"
                    border="0"
                    style="
                        border-collapse: collapse;
                    "
                >
                    <tr>
                        <td style="padding-right: 5px; vertical-align: top;">
                            <span style="color: #5d6d7f">Mobil: </span>
                        </td>
                        <td style="vertical-align: top;">
                            <a
                                href="tel:+420123456789"
                                style="
                                    color: #237;
                                    text-decoration: none;
                                    font-weight: 600;
                                "
                                >+420 123 456 789</a
                            >
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-right: 5px; vertical-align: top;">
                            <span style="color: #5d6d7f">E-mail: </span>
                        </td>
                        <td style="vertical-align: top;">
                            <a
                                href="mailto:novak@foobar.com"
                                style="color: #237; text-decoration: none"
                                >novak@foobar.com</a
                            >
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-right: 5px; vertical-align: top;">
                            <span style="color: #5d6d7f">Web: </span>
                        </td>
                        <td style="vertical-align: top;">
                            <a
                                href="https://foobar.com"
                                style="color: #237; text-decoration: none"
                                >foobar.com</a
                            >
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td style="vertical-align: top;">
                <a
                    href="https://via.placeholder.com/150"
                    download
                    style="color: #5d6d7f; font-size: 12px; text-decoration: none;"
                    >Vizitka ke stažení</a
                >
            </td>
        </tr>
    </table>
    <!--[if mso]>
    </td></tr></table>
    <![endif]-->
</body>
</html>

关键注意事项 #

• 不要在邮件模板中使用table-layout: fixed，该属性会强制单元格按设定宽度渲染，窄屏下直接挤压内容变形
• 所有图片必须显式声明width、height属性，并添加display: block; border:0;样式，避免Outlook下出现图片底部间隙、蓝色边框问题
• 移动端覆盖样式必须添加!important，否则内联样式优先级更高，无法生效
• 所有间距优先使用cellpadding和单元格padding实现，避免使用margin，部分邮件客户端不支持非块级元素的margin属性
• 外层容器固定宽度设为430px即可适配绝大多数桌面端邮件预览窗口，不会出现横向滚动条

内容的提问来源于stack exchange，提问作者Daniel Nýdrle