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;
精彩评论