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!

回答1:

Apply this:

style = "border-collapse: collapse;"

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

回答2:

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

回答3:

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.

回答4:

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

回答5:

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

回答6:

How about

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

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

回答7:

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.

回答8:

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)

来源：https://stackoverflow.com/questions/5303254/getting-rid-of-table-borders-in-html-emails

标签

html

html-table

border

html-email