Search code examples
htmlcsshtml-tablemailchimpnewsletter

Mailchimp applies the table's border in the whole template design


Mailchimp is so frustrating. I'm trying to make a campaign with the template that I did. It's supposed to look like this:

template design

BUT when I'm trying to paste a table that I copied from google sheets, it's looking like this

template with border

How do I fix it? How can I make the borders disappear every time I'm going to paste a table?

If you're wondering this is the source code (I removed the content because it's classified and it exceeded the 30,000 characters limit):

<style type="text/css"><!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}-->
</style>
<table border="1" cellpadding="0" cellspacing="0" dir="ltr">
<colgroup>
    <col width="277" />
    <col width="100" />
    <col width="100" />
    <col width="113" />
    <col width="114" />
    <col width="49" />
    <col width="79" />
    <col width="2" />
    <col width="100" />
    <col width="100" />
</colgroup>
<tbody>
    <tr>
        <td data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;AS OF: 8/29/16&quot;}">AS OF: 8/29/16</td>
        <td colspan="6" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;DIGITAL CARDS / CODES\n Official Pins or Scans with Text&quot;}" rowspan="1">DIGITAL CARDS / CODES<br />
        Official Pins or Scans with Text</td>
        <td>&nbsp;</td>
        <td colspan="2" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;PHYSICAL CARDS\n Free shipping on 500+ units&quot;}" rowspan="1">PHYSICAL CARDS<br />
        Free shipping on 500+ units</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td colspan="2" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;&lt; 100 Units&quot;}" rowspan="1">&lt; 100 Units</td>
        <td colspan="2" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;100+ Units\n Call/Email for pricing on 1000+ units per item&quot;}" rowspan="1">100+ Units<br />
        Call/Email for pricing on 1000+ units per item</td>
        <td colspan="2" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;Format&quot;}" rowspan="1">Format</td>
        <td>&nbsp;</td>
        <td colspan="2" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;Call/Email for pricing\n on 1000+ units per item&quot;}" rowspan="1">Call/Email for pricing<br />
        on 1000+ units per item</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;Unit Cost&quot;}">&nbsp;</td>
        <td data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;% Off MSRP&quot;}">&nbsp;</td>
        <td data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;Unit Cost&quot;}">&nbsp;</td>
        <td data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;% Off MSRP&quot;}">&nbsp;</td>
        <td data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;Pins&quot;}">&nbsp;</td>
        <td data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;Scans + Text&quot;}">&nbsp;</td>
        <td>&nbsp;</td>
        <td data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;Unit Cost&quot;}">&nbsp;</td>
        <td data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;% Off MSRP&quot;}">&nbsp;</td>
    </tr>
    <tr>
        <td data-sheets-numberformat="[null,4,&quot;\&quot;$\&quot;#,##0&quot;,1]" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:10}">&nbsp;</td>
        <td data-sheets-numberformat="[null,4,&quot;\&quot;$\&quot;#,##0.00&quot;,1]" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:9.15}">&nbsp;</td>
        <td data-sheets-numberformat="[null,3,&quot;0.00%&quot;,1]" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:0.085}">&nbsp;</td>
        <td data-sheets-numberformat="[null,4,&quot;\&quot;$\&quot;#,##0.00&quot;,1]" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:9.1}">&nbsp;</td>
        <td data-sheets-numberformat="[null,3,&quot;0.00%&quot;,1]" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:0.09}">&nbsp;</td>
        <td data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;\u25cf&quot;}">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td data-sheets-numberformat="[null,4,&quot;\&quot;$\&quot;#,##0.00&quot;,1]" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:9.1}">&nbsp;</td>
        <td data-sheets-numberformat="[null,3,&quot;0.00%&quot;,1]" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:0.09}">&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td data-sheets-numberformat="[null,4,&quot;\&quot;$\&quot;#,##0&quot;,1]">&nbsp;</td>
        <td data-sheets-numberformat="[null,4,&quot;\&quot;$\&quot;#,##0.00&quot;,1]">&nbsp;</td>
        <td data-sheets-numberformat="[null,3,&quot;0.00%&quot;,1]">&nbsp;</td>
        <td data-sheets-numberformat="[null,4,&quot;\&quot;$\&quot;#,##0.00&quot;,1]">&nbsp;</td>
        <td data-sheets-numberformat="[null,3,&quot;0.00%&quot;,1]">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</tbody>
</table>

Solution

  • Step 1: set each <table> to border="0"

    <table border="0" cellpadding="0" cellspacing="0" dir="ltr">
    

    Step 2: delete the commented-out td {border: 1px solid #ccc;}

    You should now have no borders anywhere, so go back and add only the borders you want with inline styles on either <td>s (best) or <table>s. Eg:

    <table border="0" cellpadding="0" cellspacing="0" dir="ltr">
        <tr>
            <td style="border-top: 1px solid #ffffff;">
                content
            </td>
        </tr>
    </table>
    

    This should produce an email with no unintentional borders anywhere. I'm not sure what pasting from Google Sheets is like, but you'll want to edit the HTML in this way to make sure it displays correctly.