<style> 在 Outlook 2007 上无法按预期为 <table> 工作

Question

有问题的

上下文

我使用 asp.net 服务器发送带有表格的电子邮件。此表包含客户输入的输入。

应该怎么做

PrintScreened from JSFiddle

它的作用

来自 Outlook 2007 消息的 PrintScreened。

规定

VB 代码无关紧要（因为它可以正确发送电子邮件），问题来自mailMessage.body 文本。

这是它的代码：

Dim table As String
Dim mailMessage As New MailMessage()

'There are two multiline textboxes which I want to create a table from
table = "<table><thead><tr><th>Length</th><th>Force</th></tr></thead><tbody>"
For i = 0 To UBound(Split(length.Text, Environment.NewLine))
    table += "<tr><td>" & Split(length.Text, Environment.NewLine)(i) & "</td>"
    table += "<td>" & Split(force.Text, Environment.NewLine)(i) & "</td></tr>"
Next
table += "</tbody></table>"

mailMessage.Body = table & _
"<style>" & vbCrLf & _
"table {display: inline-table; border:3px solid; border-collapse:collapse;}" & vbCrLf & _
"thead {border:2px solid;}" & vbCrLf & _
"tbody {border:1px solid;}" & vbCrLf & _
"th {border:1px solid; padding:3px;}" & vbCrLf & _
"td {font-size:90%; border:1px solid; padding:3px; text-align:left;}" & vbCrLf & _
"</style>"

这个应该翻译成this，但是在这个过程中出了点问题。

来自https://www.campaignmonitor.com/css/，我使用的所有style 命令都应该可以工作..

问题

我做错了什么？

更新 1

我尝试将<style> 标记放在桌子前面，它是这样做的：

<style>[...]</style>
<table>[...]</table>

似乎最后一个 CSS 命令覆盖了之前的所有命令（表格 3px 边框被td...覆盖）

我尝试了 JRulle 命题，它给出了这个：

如果没有找到解决方案，这两种方法都可以工作，但我真的希望表格边框大于 ... 样式的内边框。这可能吗？

更新 2

遵循JRulle 的第二个命题：

不折叠

这是一个预期的结果，因为我的第一行是<th>，所以样式不应该为它们绘制边框。

折叠

现在真的很奇怪，似乎 collat​​e 函数实际上将内边框放在了外边框上......

Answer 1

显示的错误与您的表格边框有关，因此请尝试以下解决方案之一：

一：将 Border 值设置为内联 TD 属性，如下所示：

<table border="1">

二：单独设置边框css属性：

border-width: 1px;
border-color: black;
border-style: solid;

*我无法访问 Outlook 2007 来为您测试这些...抱歉

更新 1：

根据您的反馈调整样式：

table { 
  border-width: 3px; 
  border-color: black; 
  border-style: solid; 
  border-collapse: collapse; 
}
td { 
  border-width: 1px; 
  border-color: black; 
  border-style: solid; 
}

*基本上，您需要为不同的标签设置不同的边框，然后还折叠边框（与属性border="1"一起使用）

Answer 2

我可以正确绘制表格边框的唯一方法是使用 border-left border-bottom 等对每个边框进行硬编码。

最后的代码（使用内联样式）是这样的：

table = "<table style=""border: 3px solid; border-collapse: collapse; padding: 3px;"">" & _ 
    "<thead><tr><th style=""border-right: 1px solid;"">Length</th><th>Force</th></tr></thead><tbody>"
For i = 0 To UBound(Split(length.Text, Environment.NewLine))
    If i = 0 Then
        borderTop = "2px"
    Else 'i > 0 then
        borderTop = "1px"
    End If
    table += "<tr><td style=""border-right: 1px solid; border-top: " & borderTop & _ 
        " solid;"">" & Split(length.Text, Environment.NewLine)(i) & "</td>"
    table += "<td style=""border-top: " & borderTop & " solid;"">" & _ 
        Split(force.Text, Environment.NewLine)(i) & "</td></tr>"
Next
table += "</tbody></table>"

mailMessage.Body = table

Answer 3

您不能在电子邮件中使用样式标签。您只能使用内联样式，这意味着将样式直接硬编码到 HTML 中。不幸的是，这些天仍然如此！

Read more here.