如何在HTML表格的指定行之间添加<hr>标签？

核心问题分析 #

之前尝试的方法失效，主要因为：

• 多数邮件客户端（包括Outlook）不支持给<tr>直接设置边框样式
• 表格默认border-collapse: separate会导致单元格边框出现间隙
• 空行单元格未设置高度，无法显示完整线条

兼容所有邮件客户端的两种方案 #

方案1：跨列空行+背景色（最稳定） #

通过插入一个跨所有列的空单元格，用背景色实现连续线条，完全兼容Outlook及主流浏览器：

<!doctype html>
<html>
<head>
    <title>Test Table Styling</title>
</head>
<body>
    <h1>Test</h1>
    <!-- 带分隔线的表格 -->
    <table style="width: 100%; border-collapse: collapse;">
        <tbody>
            <tr>
                <th>head1</th>
                <th>head2</th>
                <th>head3</th>
            </tr>
            <!-- 第一行下方的蓝色分隔线 -->
            <tr>
                <td colspan="3" style="height: 2px; background-color: blue; padding: 0; margin: 0; border: none;"></td>
            </tr>
            <tr>
                <td>blah</td>
                <td>blah2</td>
                <td>blah3</td>
            </tr>
            <!-- 第二行下方的绿色分隔线 -->
            <tr>
                <td colspan="3" style="height: 1px; background-color: green; padding: 0; margin: 0; border: none;"></td>
            </tr>
            <tr>
                <td>blah4</td>
                <td>blah5</td>
                <td>blah6</td>
            </tr>
        </tbody>
    </table>

    <hr />

    <table style="width: 100%; border-collapse: collapse;">
        <tbody>
            <tr>
                <th>head1</th>
                <th>head2</th>
                <th>head3</th>
            </tr>
            <tr>
                <td>blah</td>
                <td>blah2</td>
                <td>blah3</td>
            </tr>
            <!-- 第一行下方的黑色分隔线 -->
            <tr>
                <td colspan="3" style="height: 1px; background-color: #000; padding: 0; margin: 0; border: none;"></td>
            </tr>
            <tr>
                <td>blah4</td>
                <td>blah5</td>
                <td>blah6</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

方案2：单元格边框合并（需开启border-collapse） #

给表格设置border-collapse: collapse，然后给目标行的所有单元格设置统一的边框样式，实现连续线条：

<!doctype html>
<html>
<head>
    <title>Test Table Styling</title>
</head>
<body>
    <h1>Test</h1>
    <table style="width: 100%; border-collapse: collapse;">
        <tbody>
            <tr>
                <th>head1</th>
                <th>head2</th>
                <th>head3</th>
            </tr>
            <tr>
                <td style="border-top: 2px solid blue;">blah</td>
                <td style="border-top: 2px solid blue;">blah2</td>
                <td style="border-top: 2px solid blue;">blah3</td>
            </tr>
            <tr>
                <td style="border-top: 1px solid green;">blah4</td>
                <td style="border-top: 1px solid green;">blah5</td>
                <td style="border-top: 1px solid green;">blah6</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

关键注意事项 #

• 必须给表格添加style="border-collapse: collapse;"，否则单元格边框会有间隙
• 避免直接给<tr>设置边框，邮件客户端支持度极低
• 所有样式必须用内联样式，不能用CSS类或内部样式表（Outlook不支持）
• 分隔线高度建议设为1-2px，避免在不同客户端显示异常

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