内部列填充mailchimp

时间:2018-09-06 02:02:06

标签: html-table html-email mailchimp

我正在制作自定义html模板,但是无法确定如何在列(带有“号召性用语”按钮的列)上进行内部填充

我一直在尝试在内容前插入一个宽度较小的td,但它会破坏列。

下面是我的代码(对此致歉),但是我无法弄清楚在不中断的情况下将其削减的确切位置。

enter image description here

    
    
    
    <table width="650" style="background-color: #077ec3" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper" mc:repeatable mc:variant="2 Column With IMAGE + TITLE + DESC + READ MORE" style="table-layout:fixed;">
	<tr>
        <td height="15" class="fix_height"> </td>
     </tr>

      <tr>
        <td class="pad_side" >
          <table width="310"  border="0" cellspacing="0" cellpadding="0" align="left" class="wrapper">
            <tr>
              <td align="center" valign="top">
                <table width="310" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper">
                  <tr>
                    <td width="45" class="hide"> </td>
                    <td valign="top">
                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                        <tr>
                          <td align="center" valign="top"><img src="https://gallery.mailchimp.com/330985abb260e1ae49eb607dd/images/a3bb236f-8b0a-4003-93de-6f40d964612c.jpg" width="265" height="130" alt="img_265X130" style="display:block;border:none; max-width:265px;" mc:edit="product1_img">
                          </td>
                        </tr>
                        <tr>
                          <td height="25" class="fix_height" style="background-color: #ffffff;"> </td>
                        </tr>
                        
                        
                        <tr style="background-color: #ffffff">
                          <td class="black" align="left" valign="top" style="font-family:Arial, sans-serif;font-size:18px;line-height:24px;color:#333333;" mc:edit="product1_title">Blog Post</td>
                        </tr>
                        <tr>
                          <td height="8" style="line-height:1px;font-size:1px; background-color: #ffffff;"> </td>
                        </tr>
                        <tr>
                          <td class="grey" align="left" valign="top" style="font-family:Arial, sans-serif;background-color: #ffffff;font-size:13px;line-height:20px;color:#333333;" mc:edit="product1_description">Text block 1</td>
                        </tr>
                        <tr>
                          <td height="15" style="line-height:1px;font-size:1px; background-color: #ffffff"> </td>
                        </tr>
                        
                        
                        
                        
                        
                        
                        <tr mc:hideable>
                          <td height="43" style="background-color: #ffffff" valign="top">
                            <table border="0" align="left" cellpadding="0" cellspacing="0" class="wrapper">
                              <tr>
                                <td>
                                  <table border="0" align="center" cellpadding="0" cellspacing="0">
                                    <tr>
                                      <td height="43" class="button_2" align="center" style="background-color:#ffffff; font-family:Arial, sans-serif;font-size:16px;line-height:18px;color:#ffffff;border-radius:3px;" bgcolor="#ffffff" mc:edit="btn_10">
                                        <a href="#" target="_blank" style="text-decoration:none;color:#ffffff;font-weight:600" class="button_2">   Call to action   </a>
                                      </td>
                                    </tr>
                                      <tr>
                          <td height="25" style="line-height:1px;font-size:1px; background-color: #ffffff"> </td>
                        </tr>
                                  </table>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>

                        
                        
                        
                        <tr>
                          <td height="40" style="line-height:1px;font-size:1px;" class="hide"> </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <table width="310" border="0" cellspacing="0" cellpadding="0" align="right" class="wrapper">
            <tr>
              <td align="center" valign="top">
                <table width="310" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper">
                  <tr>
                    <td align="left" valign="top">
                      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                        <tr>
                          <td align="center" valign="top" class="pad_top"><img src="https://gallery.mailchimp.com/330985abb260e1ae49eb607dd/images/a3bb236f-8b0a-4003-93de-6f40d964612c.jpg" width="265" height="130" alt="img_265X130" style="display:block;border:none; max-width:265px;" mc:edit="product2_img">
                          </td>
                        </tr>
                        <tr>
                          <td height="25" class="fix_height" style="background-color: #ffffff;"> </td>
                        </tr>
                        <tr>
                          <td class="black" align="left" valign="top" style="font-family:Arial, sans-serif;font-size:18px;line-height:24px;color:#333333;background-color: white;" mc:edit="product2_title">Blog Post 2</td>
                        </tr>
                        <tr style="background-color: white;">
                          <td height="8" style="line-height:1px;font-size:1px;" > </td>
                        </tr>
                        <tr>
                          <td class="grey" align="left" valign="top" style="font-family:Arial, sans-serif;font-size:13px;line-height:20px;color:#333333;background-color:#ffffff;" mc:edit="product2_description">Text block 2</td>
                        </tr>
                        
                        
                        <tr style="background-color: white;">
                          <td height="15" style="line-height:1px;font-size:1px;"> </td>
                        </tr>
                        
                        
                           <tr mc:hideable>
                          <td height="43" style="background-color: #ffffff" valign="top">
                            <table border="0" align="left" cellpadding="0" cellspacing="0" class="wrapper">
                              <tr>
                                <td>
                                  <table border="0" align="center" cellpadding="0" cellspacing="0">
                                    <tr>
                                      <td height="43" class="button_2" align="center" style="background-color:#ffffff; font-family:Arial, sans-serif;font-size:16px;line-height:18px;color:#ffffff;border-radius:3px;" bgcolor="#ffffff" mc:edit="btn_10">
                                        <a href="#" target="_blank" style="text-decoration:none;color:#ffffff;font-weight:600" class="button_2">   Call to action   </a>
                                      </td>
                                    </tr>
                                      <tr>
                          <td height="25" style="line-height:1px;font-size:1px; background-color: #ffffff"> </td>
                        </tr>
                                  </table>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                        </table>
                    </td>
                    <td width="45" class="hide"> </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

1 个答案:

答案 0 :(得分:1)

padding-left添加到包含所需空格的文本和CTA的td元素中。 填充得到很好的支持,因此可以正常工作。