使用C# SmtpClient发送邮件后HTML自增列未显示的问题

绝大多数邮件客户端（尤其是Outlook系列）不支持counter-reset、counter-increment以及::before伪元素这类CSS特性，所以你依赖CSS生成的自增编号在邮件中无法显示。

方案一：直接硬编码编号（最可靠，兼容所有邮件客户端） #

放弃CSS计数器，在C#生成HTML时直接给第一列填充编号值，这是邮件场景下的最优解。

修改后的HTML示例 #

<style>
    .tableOrder {
        border-collapse: collapse;
        text-align: center;
    }
</style>

<font> This is the following order of Pickups Arrives </font> <br><br>
<table class="tableOrder" border="1">
    <tr style="background-color:#6FA1D2;color:#ffffff;">
        <td style="color:#555555;">Order Arrive</td>
        <td style="color:#555555;">Pickup Number</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>1233</td>
    </tr>
    <tr>
        <td>3</td>
        <td>521346</td>
    </tr>
    <tr>
        <td>4</td>
        <td>1246</td>
    </tr>
    <tr>
        <td>5</td>
        <td>7594</td>
    </tr>
</table>

对应C#代码调整思路 #

假设你有订单数据集合，循环时维护一个计数器，直接将编号写入<td>：

// 示例：假设orders是你的订单数据集合
int rowNumber = 1;
StringBuilder htmlBuilder = new StringBuilder();

// 先拼接样式、表头部分
htmlBuilder.AppendLine(@"
<style>
    .tableOrder {
        border-collapse: collapse;
        text-align: center;
    }
</style>
<font> This is the following order of Pickups Arrives </font> <br><br>
<table class=""tableOrder"" border=""1"">
    <tr style=""background-color:#6FA1D2;color:#ffffff;"">
        <td style=""color:#555555;"">Order Arrive</td>
        <td style=""color:#555555;"">Pickup Number</td>
    </tr>");

// 循环生成带编号的行
foreach (var order in orders)
{
    htmlBuilder.AppendLine($"<tr><td>{rowNumber}</td><td>{order.PickupNumber}</td></tr>");
    rowNumber++;
}

// 闭合表格
htmlBuilder.AppendLine("</table>");

// 最终赋值给邮件Body
string htmlString = htmlBuilder.ToString();

方案二：调整CSS写法（仅兼容现代邮件客户端） #

如果坚持要用CSS，可调整写法适配部分支持现代CSS的客户端（如Gmail、Apple Mail），但Outlook依然无法显示：

<style>
    .tableOrder {
        border-collapse: collapse;
        text-align: center;
    }
    .tableOrder tbody {
        counter-reset: rowNumber;
    }
    .tableOrder tr:not(:first-child) .counterColumn {
        counter-increment: rowNumber;
    }
    .tableOrder .counterColumn::before {
        content: counter(rowNumber);
        display: inline-block;
        min-width: 1em;
    }
</style>

<font> This is the following order of Pickups Arrives </font> <br><br>
<table class="tableOrder" border="1">
    <tr style="background-color:#6FA1D2;color:#ffffff;">
        <td style="color:#555555;">Order Arrive</td>
        <td style="color:#555555;">Pickup Number</td>
    </tr>
    <tr>
        <td class="counterColumn"></td>
        <td>1</td>
    </tr>
    <tr>
        <td class="counterColumn"></td>
        <td>1233</td>
    </tr>
    <tr>
        <td class="counterColumn"></td>
        <td>521346</td>
    </tr>
    <tr>
        <td class="counterColumn"></td>
        <td>1246</td>
    </tr>
    <tr>
        <td class="counterColumn"></td>
        <td>7594</td>
    </tr>
</table>

推荐使用方案一，邮件客户端的CSS兼容性普遍较差，直接硬编码编号是最稳妥的实现方式。

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