css - &lt;style&gt; 在 Outlook 2007 上无法按 <table> 的预期工作

Question

有问题

< style> 标记在发送到 Outlook 2007 的电子邮件中似乎无法正常工作。

上下文

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

它应该做什么

PrintScreened from JSFiddle

它的作用

PrintScreened Outlook 2007 消息。

规定

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> ，因此样式不应为它们绘制边框。

折叠

现在这真的很奇怪，似乎整理功能实际上将内部边框放在外部边框之上......

Answer 1

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

一:将边框值设置为内联 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"一起使用)