在 Outlook 中查看时 HtmlTable 标题单元格未对齐答案

【问题标题】：HtmlTable Header Cell not Aligned when viewing in Outlook在 Outlook 中查看时 HtmlTable 标题单元格未对齐
【发布时间】：2020-08-16 08:20:27
【问题描述】：

无论我尝试什么（在 Outlook 中查看时），我都无法对齐我的第一个标题单元格

最后一个单元格 Header 最初也未对齐，并且距离中心上方一行。我设法对齐最后一个 Header 单元格。

我可以知道是否有解决方法，或者我的方法是否有更清洁的解决方案？

HTML 输出

<table border='1' width='100%'>
   <tr>
      <th style='vertical-align: top'>Others Subsidy Start Date</th>
      <th style='vertical-align: top'>Others Subsidy End Date</th>
      <th style='vertical-align: top'>Center</th>
      <th style='vertical-align: top'>Child Name</th>
      <th style='vertical-align: top'>Child BC</th>
      <th style='vertical-align: top'>Upcoming Disbursement Amount</th>
      <th style='vertical-align: top'>Disbursement Number</th>
      <th style='vertical-align: top'>Number of Remaining Disbursements</th>
   </tr>
   <tr>
      <td style='vertical-align: top'></td>
      <td style='vertical-align: top'></td>
      <td style='vertical-align: top'>User Acceptance Testing Centre</td>
      <td style='vertical-align: top'>UAT Jackson Loh</td>
      <td style='vertical-align: top'>TXXXXXXXK</td>
      <td style='vertical-align: top'>$20</td>
      <td style='vertical-align: top'>2</td>
      <td style='vertical-align: top'>2</td>
   </tr>
</table>

HtmlTableRow row;
row = new HtmlTableRow();

row.Cells.Add(new HtmlTableCell { InnerText = "Others Subsidy Start Date" });
row.Cells.Add(new HtmlTableCell { InnerText = "Others Subsidy End Date" });
row.Cells.Add(new HtmlTableCell { InnerText = "Center" });
row.Cells.Add(new HtmlTableCell { InnerText = "Child Name" });
row.Cells.Add(new HtmlTableCell { InnerText = "Child BC" });
row.Cells.Add(new HtmlTableCell { InnerText = "Upcoming Disbursement Amount" });
row.Cells.Add(new HtmlTableCell { InnerText = "Disbursement Number" });
row.Cells.Add(new HtmlTableCell { InnerText = "Number of Remaining Disbursements" });
table.Rows.Add(row);
row = new HtmlTableRow();

row.Cells.Add(new HtmlTableCell { InnerText = othersSubsidyStart.ToString() });
row.Cells.Add(new HtmlTableCell { InnerText = othersSubsidyEnd.ToString() });
row.Cells.Add(new HtmlTableCell { InnerText = centre });
row.Cells.Add(new HtmlTableCell { InnerText = childName });
row.Cells.Add(new HtmlTableCell { InnerText = childBC });
row.Cells.Add(new HtmlTableCell { InnerText = "$" + ((double)dAmount1).ToString() });
row.Cells.Add(new HtmlTableCell { InnerText = "1" });
row.Cells.Add(new HtmlTableCell { InnerText = remainingDisbursements.ToString() });
table.Rows.Add(row);
row = new HtmlTableRow();

output = (mailMessage.ToString())
            .Replace("<table>", "<table border='1' width='100%'>")
            .Replace("<td>Others Subsidy Start Date</td>", "<th style='vertical-align: top'>Others Subsidy Start Date</th>")
            .Replace("<td>Others Subsidy End Date</td>", "<th style='vertical-align: top'>Others Subsidy End Date</th>")
            .Replace("<td>Center</td>", "<th style='vertical-align: top'>Center</th>")
            .Replace("<td>Child Name</td>", "<th style='vertical-align: top'>Child Name</th>")
            .Replace("<td>Child BC</td>", "<th style='vertical-align: top'>Child BC</th>")
            .Replace("<td>Upcoming Disbursement Amount</td>", "<th style='vertical-align: top'>Upcoming Disbursement Amount</th>")
            .Replace("<td>Disbursement Number</td>", "<th style='vertical-align: top'>Disbursement Number</th>")
            .Replace("<td>Number of Remaining Disbursements</td>", "<th style='vertical-align: top'>Number of Remaining Disbursements</th>")
            .Replace("<td>", "<td style='vertical-align: top'>")
            + "<td><b>Upcoming Disbursement Amount: $" + totalDisbursementAmount + "</b></td>";
}

【问题讨论】：

您的 C# 代码根本不相关。请仅提供输出（html），以便我们了解那里的问题。
注明@Dekel，我已将其添加进去。
请清理这个（你不应该有 \r\n\t - 它不是字符串输出的一部分）。
是解析前生成的输出。好的，我会清理它。
我把你的代码块改成了sn-p。看起来不错，所以我不确定这是否正是你的核心。

标签： c# html html-table outlook

【解决方案1】：

展望？

您正在创建 HTML 电子邮件吗？

尝试渲染以下内容：

<head>
<style type="text/css">
.myawesomehead{vertical-align:top;}
.myawesomecell{font-weight:bold;}
</style>
</head>

<body>
<table border="1" width="100%">
   <tr>
      <td class="myawesomehead,myawesomecell">Others Subsidy Start Date</td> 
      <td class="myawesomehead,myawesomecell">Others Subsidy End Date</td>
      <td class="myawesomehead,myawesomecell">Center</td>
      <td class="myawesomehead,myawesomecell">Child Name</td>
      <td class="myawesomehead,myawesomecell">Child BC</td>
      <td class="myawesomehead,myawesomecell">Upcoming Disbursement Amount</td>
      <td class="myawesomehead,myawesomecell">Disbursement Number</td>
      <td class="myawesomehead,myawesomecell">Number of Remaining Disbursements</td>
   </tr>
   <tr>
      <td class="myawesomecell"></td>
      <td class="myawesomecell"></td>
      <td class="myawesomecell">User Acceptance Testing Centre</td>
      <td class="myawesomecell">UAT Jackson Loh</td>
      <td class="myawesomecell">TXXXXXXXK</td>
      <td class="myawesomecell">$20</td>
      <td class="myawesomecell">2</td>
      <td class="myawesomecell">2</td>
   </tr>
</table>
</body>

根据我的经验，将 CSS 添加到 head 标签并将标签属性包装在 double(") 而不是 single(') 中可以在各种电子邮件客户端中节省一些问题。在代码中，您必须处理反斜杠。

【讨论】：

请问如何用双引号替换单引号？我试过string.Replace("'", "\"")，它也在替换中包含了反斜杠
哈哈！是的，这可能很棘手。之前我已经声明了一个常量变量： const string myawesomequote = "\""; 然后在你的替换函数调用中使用它： output = (mailMessage.ToString()) .Replace("", " ") 我希望这会有所帮助。