Question

我的网站上有一个区域，用户可以上传excel文件并在服务器上处理。在将excel文件处理成数据表的同时，程序正在构建一个报告以返回给用户，让他们知道我们成功添加了哪些部分以及哪些部分没有添加。

我正在做的是通过电子邮件发送报告并在弹出窗口中显示报告，以便用户可以即时查看添加了哪些部分以及哪些部分被拒绝。

报告的格式在屏幕上看起来不错，但在电子邮件中看起来不太好。

有人可以查看此代码并告诉我如何内联我的样式以便它在电子邮件中看起来也很好吗？

- 代码 -

static async Task<string> BuildTableReportAsync(DataTable dt, string caption)
{
    return await Task.Run(() =>
      {
          StringBuilder sb = new StringBuilder();
          sb.Append("<html><body><table class='reportWrapperTable' cellspacing='0'cellpadding='4' rules='rows' style='color:#1f2240;background-color:#ffffff'><thead style='100%;color:#ffffff;background-color:#1f2240;font-weight:bold'><tr>");
          foreach (DataColumn c in dt.Columns)
          {
              sb.AppendFormat("<th scope='col'>{0}</th>", c.ColumnName);
          }
          sb.AppendLine("</tr></thead><caption style='background-color:#ffffff;color:#1f2240;,margin-bottom:1em;font-size:18pt;width:100%;border:0'>" + caption + "</caption><tbody>");
          foreach (DataRow dr in dt.Rows)
          {
              sb.Append("<tr>");
              foreach (object o in dr.ItemArray)
              {
                  sb.AppendFormat("<td>{0}</td>", HttpUtility.HtmlEncode(o.ToString()));
              }
              sb.AppendLine("</tr>");
          }
          sb.AppendLine("</tbody></table></body></html>");
          dt.Dispose();
          return sb.ToString();
      });
}

- 在浏览器中查看表格时的第一个快照结果 -

- 在电子邮件中查看表格时的第二个快照结果。这是标题和标题看起来很糟糕的那个.--

On Screen Browser View

Email View

以下是HTML CODE

<table class="reportWrapperTable" cellspacing="0" cellpadding="4" rules="rows" style="color:#1f2240;background-color:#ffffff"><thead style="100%;color:#ffffff;background-color:#1f2240;font-weight:bold"><tr><th scope="col">Number</th><th scope="col">Name</th><th scope="col">Length</th><th scope="col">Width</th><th scope="col">Height</th><th scope="col">PackageQty</th><th scope="col">UnitMeasure</th><th scope="col">Cost</th><th scope="col">Profile</th><th scope="col">Category</th></tr></thead><caption style="background-color:#ffffff;color:#1f2240;,margin-bottom:1em;font-size:18pt;width:100%;border:0">AlumCloud Parts Not Added Report</caption><tbody>
<tr><td>OB122</td><td>FR 2F OB OP S-CL F-B/FG400</td><td>0</td><td>75.5</td><td>85.75</td><td>1</td><td>Each</td><td></td><td>1 3/4 x 4</td><td>Door Frame (Package)</td></tr>
<tr><td>OB612</td><td>FR 1FT OB OP S-CL LOK/FG450</td><td>0</td><td>39.5</td><td>126</td><td>1</td><td>Each</td><td>0</td><td>1 3/4 x4 1/2</td><td>Door Frame (Package)</td></tr>
<tr><td>CD212</td><td>NS OP CAL 3' x 7' DO /BR 9.5</td><td>0</td><td>36</td><td>84</td><td>1</td><td>Each</td><td>0</td><td>N/A</td><td>Door Leaf(Package)</td></tr>
</tbody></table>

Answer 1

这是fluid example。因为你有这么多列，固定表可能会更好 - 你可以简单地改变固定px宽度的％宽度，并根据需要添加任意数量的列，确保每一行都相同。只需确保col宽度总是与表格的宽度相加。

Answer 2

这是标题标签。我将<caption>标记移动到<table>开始标记之后的第一个标记。

<table class="reportWrapperTable" cellspacing="4" cellpadding="2" width="100%" rules="rows" style="border-collapse:collapse;color:#1f2240;background-color:#ffffff"><caption style="background-color:#ffffff;color:#1f2240;margin-bottom:.5em;font-size:18pt;width:100%;border:0">AlumCloud Parts Not Added Report</caption><thead style="100%;color:#ffffff;background-color:#1f2240;font-weight:bold"><tr><th scope="col" style="background-color:#1f2240">Number</th><th scope="col" style="background-color:#1f2240">Name</th><th scope="col" style="background-color:#1f2240">Length</th><th scope="col" style="background-color:#1f2240">Width</th><th scope="col" style="background-color:#1f2240">Height</th><th scope="col" style="background-color:#1f2240">PackageQty</th><th scope="col" style="background-color:#1f2240">UnitMeasure</th><th scope="col" style="background-color:#1f2240">Cost</th><th scope="col" style="background-color:#1f2240">Profile</th><th scope="col" style="background-color:#1f2240">Category</th></tr></thead><tbody>
<tr><td>OB122</td><td>FR 2F OB OP S-CL F-B/FG400</td><td>0</td><td>75.5</td><td>85.75</td><td>1</td><td>Each</td><td></td><td>1 3/4 x 4</td><td>Door Frame (Package)</td></tr>
<tr><td>OB612</td><td>FR 1FT OB OP S-CL LOK/FG450</td><td>0</td><td>39.5</td><td>126</td><td>1</td><td>Each</td><td>0</td><td>1 3/4 x4 1/2</td><td>Door Frame (Package)</td></tr>
<tr><td>CD212</td><td>NS OP CAL 3' x 7' DO /BR 9.5</td><td>0</td><td>36</td><td>84</td><td>1</td><td>Each</td><td>0</td><td>N/A</td><td>Door Leaf(Package)</td></tr>
</tbody></table>

如何格式化电子邮件的html表格

2 个答案: