HTML转换为MS Word时表格行下边框不可见问题求助

核心原因 #

微软Office的HTML解析逻辑不支持直接为<tr>元素设置边框样式，无论标准CSS的border属性还是mso前缀的Office专属属性，作用在<tr>上都会被忽略，必须将边框样式定义到行内的每一个<td>元素上，同时配合表格的边框折叠属性，才能实现整行底部边框的视觉效果。

具体实现步骤 #

• 给<table>标签添加border-collapse: collapse样式，避免单元格边框出现空隙导致线条不连续
• 把原本写在<tr>上的边框样式，迁移到当前行的所有<td>元素上，mso专属属性同样需要写在<td>上才会生效
• 批量场景可以在<head>中通过CSS选择器统一定义样式，避免每个<td>重复编写代码

可正常生效的完整代码示例 #

<html xmlns:v="urn:schemas-microsoft-com:vml"
    xmlns:o="urn:schemas-microsoft-com:office:office"
    xmlns:w="urn:schemas-microsoft-com:office:word"
    xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
    xmlns="http://www.w3.org/TR/REC-html40">
    <head>
        <style>
            table {border-collapse: collapse;}
            tr td {border-bottom: 2pt solid #AFAFAF; mso-border-bottom-alt: solid #AFAFAF 2pt;}
        </style>
    </head>
    <body>
        <table>
            <tr>
               <td>One</td>
               <td>1</td>
            </tr>
            <tr>
               <td>One</td>
               <td>1</td>
             </tr>
        </table>
    </body>
</html>

如果不方便添加全局样式，直接给每个<td>加行内样式也可以生效：

<tr>
    <td style="border-bottom:2pt solid #AFAFAF; mso-border-bottom-alt: solid #AFAFAF 2pt;">One</td>
    <td style="border-bottom:2pt solid #AFAFAF; mso-border-bottom-alt: solid #AFAFAF 2pt;">1</td>
</tr>

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