Search code examples
htmlperloutlookhtml-email

HTML email <tr> tag border formatting issue

I am trying to format the table to have rows separated by lines.Even tried using inline styles but nothing worked. Am I missing anything here?

Expected output : enter image description here

Output I am getting : enter image description here

Here is the perl code that I am using to generate the HTML for the email : 

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         => '[email protected]',
    Subject => 'Report subject',
    Type    => 'text/html',
    Data    => $email_html);


    $msg->send();
Solution

  • Some email clients (and maybe browsers) don't allow us to directly style the <tr> tag. It's also safer to avoid relying on :first-child and :last-child pseudo selectors, as they are not well supported in email.

    However you we can achieve your desired effect by styling the <table> and <td> tags:

    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;
}

    You can also have absolute control by inlining all CSS, which is still a good idea in HTML email.