CODEWITHSUNDEEP
htmlhtml-tableborderhtml-email
Ben
Ben

Reputation: 81

Getting Rid of Table Borders in HTML Emails

I'm working on an HTML email campaign (no CSS allowed) so I'm forced to use tables, something I'm not super familiar with. I've got everything looking right EXCEPT the table borders. Whenever I create a new <tr> I cannot for the life of me get rid of the inner border around the content. I have tried a few tricks (border="0px", bordercolor="white", bordercolor="#ffffff", etc), but whenever I send a test message, the borders still show up black around my text and images.

This is really messing with my design flow. Is there any trick I don't know to getting rid of HTML table borders? Help!

Upvotes: 8

Views: 42911

Answers (10)

Arun Kumar
Arun Kumar

Reputation: 127

I was facing the same issue, border was getting rid off from the table in email. Got the solution for this issue by adding style in th and td itself.

<th style="border-left: solid 1px #e9e9e9;>name</th>
<td style="border-left: solid 1px #e9e9e9;>Value</td>

Got the refrence from this blog- https://chipcullen.com/html-email-and-borders/

Upvotes: 0

mostar
mostar

Reputation: 4841

Following worked for me:

border: 0px solid white;
border-collapse: collapse;

Upvotes: 0

pork-chop
pork-chop

Reputation: 83

Just came across this tip that actually works (at least for iOS):

To prevent [hairline borders] from happening nest the problematic table into a new table with a background color that matches that of the inner table.

Source: http://www.informz.com/blog/template-design/quick-tip-removing-hairline-borders-in-html-emails-on-iphone-ipad/ (includes photos of source code)

Upvotes: 0

Grant Coombs
Grant Coombs

Reputation: 47

Use <table border="0"> without px?

Upvotes: 1

nav bhullar
nav bhullar

Reputation: 91

 <table border="0" cellpadding="0" cellspacing="0" width="100%" style = "border-collapse: collapse;">

Upvotes: 9

Deepak Patel
Deepak Patel

Reputation: 71

Apply this:

style = "border-collapse: collapse;"

To every table cell, the border should not be visible anymore.

Upvotes: 7

John
John

Reputation: 12193

Try this:

In head:

  <style type="text/css">
    table td {border-collapse: collapse;}
  </style>

Table:

<table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="border:2px solid #000000;">
  <tr>
    <td width="50%" bgcolor="#999999" style="padding:20px;">
    ...
    </td>
    <td width="50%" bgcolor="#888888" style="padding:20px;">
    ...
    </td>
  </tr>
  <tr>
    <td width="50%" bgcolor="#777777" style="padding:20px;">
    ...
    </td>
    <td width="50%" bgcolor="#666666" style="padding:20px;">
    ...
    </td>
  </tr>
</table>

Also, always keep cellpadding and cellspacing at zero. Use padding in your cells if you want spacing.

Upvotes: 3

ziv
ziv

Reputation: 31

If the content is an image, try <td valign="top"> for all <td> with images inside. Besides that, the table tag should be <table cellpadding="0" cellspacing="0" ...>. One more tip, use inline style for the borders that you want.

Upvotes: 3

Unambiguous
Unambiguous

Reputation: 65

To get rid of the table borders, use <table border="0">.

Upvotes: 2

Czechnology
Czechnology

Reputation: 15012

How about

<table style="border-collapse: collapse;">
  <!-- ... -->
</table>

? Such inline CSS should work fine even in HTML email.

Upvotes: 1

Related Questions