开发者

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开发者_StackOverflow社区 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!


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


Apply this:

style = "border-collapse: collapse;"

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


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.


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


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.


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


How about

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

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


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)


Following worked for me:

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜