HTML 电子邮件 <tr> 标签边框格式问题答案

【问题标题】：HTML email <tr> tag border formatting issueHTML 电子邮件 <tr> 标签边框格式问题
【发布时间】：2018-06-05 04:33:29
【问题描述】：

我正在尝试格式化表格以使行由行分隔。甚至尝试使用内联样式但没有任何效果。我在这里错过了什么吗？

预期输出：

我得到的输出：

这是我用来为电子邮件生成 HTML 的 perl 代码：

my $section_html = '';
$section_html.=qq(<table><tr style="border : 1px solid black;"><td>Hello1</td><td>Hello2</td></tr><tr style="border : 1px solid black;"><td>Hello3</td><td>Hello4</td></tr></table>);

my $email_html = <<EOF;
<html><head><style type="text/css">
body, td, th, strong { font-family: Verdana; font-size: 11px; }


table {
    border:none;
    border-collapse: collapse;
    text-align:center;
}

table td {
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

table th {
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

table td:first-child {
    border-left: none;
    text-align:left;
}

table  td:last-child {
    border-right: none;
}

table tr{
border-top : 1px solid #000;
}

table tr{
border-top : 1px solid black;
}


</style></head>
<body bgcolor="#ffffff">
<span style="font-size: 20px">Report Header</span>$section_html</body></html>
EOF

# Write to file
open(FILE, ">/var/weekly_report/"."report"."_"."testing".".html") or die "Unable to open file for writing: $!\n";
print FILE $email_html;
close(FILE);


# Email weekly report
my $msg = MIME::Lite->new(
    To         => 'XXXX@somedomain.com',
    Subject => 'Report subject',
    Type    => 'text/html',
    Data    => $email_html);


    $msg->send();

【问题讨论】：

如果你为table元素定义border-collapse: collapse; border: 1px solid black;，你会得到你想要的，你可以从td、th和tr删除所有的边框样式。
@FBergo 不，没用... .changed 删除了所有其他css并将表格更改为“ $section_html.=qq( tr>

Hello1 Hello2

Hello3 Hello4

);"
检查w3schools.com/cssref/tryit.asp?filename=trycss_border-collapse
生成的 HTML 在浏览器上正确渲染，只有通过 Outlook 渲染 HTML 时出现问题
哦，那就看看这个：stackoverflow.com/questions/43462203/…（outlook 的 HTML 渲染有它的怪癖）

标签： html perl outlook html-email

【解决方案1】：

这是老派。也试试这个方法。与 Ted 回答的不同之处在于，您的整个表格颜色相同，在他的回答中，您可以为不同的 td's 或 th's 选择边框颜色。

<table width="100%" border="0" cellspacing="1" cellpadding="2" bgcolor="#000000">
  <tbody>
    <tr>
      <td width="50%" bgcolor="#ffffff">Hello1</td>
      <td width="50%" bgcolor="#ffffff">Hello1</td>
    </tr>
    <tr>
      <td bgcolor="#ffffff">Hello1</td>
      <td bgcolor="#ffffff">Hello1</td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案2】：

某些电子邮件客户端（可能还有浏览器）不允许我们直接设置 <tr> 标记的样式。避免依赖 :first-child 和 :last-child 伪选择器也更安全，因为它们是 not well supported in email。

不过，我们可以通过设置<table> 和<td> 标签的样式来达到您想要的效果：

table {
    border-top: 1px solid #000;
    border-right: 1px solid #000;
}
table td,
table th {
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
}

您还可以通过内联所有 CSS 来实现绝对控制，这在 HTML 电子邮件中仍然是一个好主意。

【讨论】：

Hello1	Hello2
Hello3	Hello4