嵌入式CSS/HTML在Teams中无法渲染问题求助

问题概述 #

制作的HTML表格在Outlook中正常渲染，但发送到Teams频道邮箱后，边框、背景色等样式完全失效，仅字体设置生效。尝试内嵌样式后问题依旧。

问题原因 #

1. Teams渲染引擎的CSS限制：Teams的邮件渲染基于简化引擎，对部分CSS内联样式支持有限，复合边框写法、部分CSS属性会被过滤。
2. 无效CSS属性干扰：代码中存在width:0*这类无效属性，会导致渲染引擎忽略该元素的后续样式。
3. HTML结构不规范：原代码中<th>未包裹在<tr>标签内，且存在未闭合标签（如<th>未加</th>），破坏表格结构完整性，影响样式解析。
4. 边框写法不兼容：Teams对border-collapse支持不佳，复合border属性容易被忽略。

解决办法 #

1. 清理无效CSS：移除width:0*这类无效属性，替换为合理宽度值（如百分比、固定像素）。
2. 规范表格结构：确保所有<th>和<td>都包裹在<tr>内，所有标签正确闭合。
3. 兼容式边框写法：放弃复合border属性，改用border-top/border-bottom/border-left/border-right单独定义每一条边框，同时保留cellspacing="0"和cellpadding="0"消除默认间距。
4. 改用原生HTML属性设置背景色：Teams对HTML原生bgcolor属性的支持远优于CSSbackground-color，优先使用该属性。
5. 完全内联样式：确保所有样式都以内联方式写在对应标签上，避免外部样式表或内部样式块。

修正后的示例代码 #

<html>
    <body>
        <table cellspacing="0" cellpadding="0" style="border-collapse: collapse; font-family: Arial;">
            <tr>
                <th style="width:20%; border-top:1px solid #000; border-bottom:1px solid #000; border-left:1px solid #000; border-right:1px solid #000;">
                    "Field Header 1"
                </th>
                <th style="width:20%; border-top:1px solid #000; border-bottom:1px solid #000; border-left:1px solid #000; border-right:1px solid #000;">
                    "Field Header 2"
                </th>
                <th style="width:20%; border-top:1px solid #000; border-bottom:1px solid #000; border-left:1px solid #000; border-right:1px solid #000;">
                    "Field Header 3"
                </th>
                <th style="width:20%; border-top:1px solid #000; border-bottom:1px solid #000; border-left:1px solid #000; border-right:1px solid #000;">
                    "Field Header 4"
                </th>
                <th style="width:20%; border-top:1px solid #000; border-bottom:1px solid #000; border-left:1px solid #000; border-right:1px solid #000;">
                    "Field Header 5"
                </th>
            </tr>
            <tr>
                <td style="width:20%; border-top:1px solid #000; border-bottom:1px solid #000; border-left:1px solid #000; border-right:1px solid #000;">
                    "Field Value 1"
                </td>
                <td style="width:20%; border-top:1px solid #000; border-bottom:1px solid #000; border-left:1px solid #000; border-right:1px solid #000; text-align: center;">
                    "Field Value 2"
                </td>
                <td style="width:20%; border-top:1px solid #000; border-bottom:1px solid #000; border-left:1px solid #000; border-right:1px solid #000; text-align: center;">
                    "Field Value 3"
                </td>
                <td style="width:20%; border-top:1px solid #000; border-bottom:1px solid #000; border-left:1px solid #000; border-right:1px solid #000; text-align: center;">
                    "Field Value 4"
                </td>
                <td bgcolor="#ff0000" style="width:20%; border-top:1px solid #000; border-bottom:1px solid #000; border-left:1px solid #000; border-right:1px solid #000; color: #ffffff; text-align: center;">
                    "Field Value 5"
                </td>
            </tr>
        </table>
    </body>
</html>

内容的提问来源于stack exchange，提问作者user21258641