CODEWITHSUNDEEP
htmlcssemail
iDipa
iDipa

Reputation: 345

HTML : table border not showing in Email

I am having HTML string, which I have to pass as mail body. HTML string having table with border 0. but for some of cells, have to show top and bottom border.

Now issue is as normal HTML it is showing border fine, below image is given enter image description here

But when I add same HTML string to mail body, it is not showing borders. below image is given enter image description here

Here is my HTML string : 

<!DOCTYPE html>
<html>
<head></head>
<body>
    <table style='width:25%;'>
        <tr>
            <td style='border-bottom: 1px solid black;'><b>Invoice #</b>
            </td>
            <td style='border-bottom: 1px solid black;text-align:center;'><b>Amount</b>
            </td>
        </tr>
        <tr>
            <td>3011-20190904-W</td>
            <td style='text-align:right;'>979.71</td>
        </tr>
        <tr>
            <td></td>
            <td style='text-align:right;border-top: 1px solid black;'>979.71</td>
        </tr>
    </table>
</body>
</html>

Not able to track the issue. I am using sendgrid for mail sending.

Upvotes: 6

Views: 16483

Answers (2)

Nishit Zinzuvadiya
Nishit Zinzuvadiya

Reputation: 832

I have seen this in many mails they use <hr> tag for the border between <td> tags.

Here you need the top and bottom border for the table you can use the hr tag.
I think this will work for you.

here example for your template

<!DOCTYPE html> 
<html>
   <head> </head>
   <body>
      <table style='width:40%;'>
         <tr>
            <td><b>Invoice #</b></td>
            <td><b>Amount</b></td>
         </tr>
         <tr>
          <td colspan="2"><hr style="margin:0"/></td>
         </tr>
         <tr>
            <td>3011-20190904-W</td>
            <td>979.71</td>
         </tr>
         <tr>
            <td></td>
            <td><hr style="margin:0"></td>
         </tr>
         <tr>
            <td></td>
            <td>979.71</td>
         </tr>
      </table>
   </body>
</html>

Upvotes: 2

EuroWhisper
EuroWhisper

Reputation: 101

Instead of:

<td style="border-bottom: 1px solid black;">

Try: 

<td style="border-bottom: 1px solid #000000;">

Outlook prefers hex values instead of color names, so maybe that's the issue.

Upvotes: 10

Related Questions