html - dotmailer 3 列简易编辑器的移动堆叠 - 不适用于 iphone

Question

我正在使用Dotmailer的简易编辑器来创建响应式模板，并且一切顺利，直到我点击了需要堆叠的 3 列元素。它只是拒绝在 iPhone 上正确渲染！代码如下，请指教！

<table class="ee_element ee_borders ee_contains_bdr" style="table-layout: auto;" cellspacing="0" cellpadding="0" data-eewidth="600"><tbody><tr><td class="ee_pad ee_bdr" style="padding: 0px; border-top-color: rgb(29, 44, 112); border-top-width: 4px; border-top-style: solid;"><table class="eebdrtbl" style="table-layout: auto;" cellspacing="0" cellpadding="0"><tbody><tr><td class="eeb_width" style="width: 600px;"><table width="100%" class="ee_spacer eev_element" style="width: 600px; table-layout: auto;" border="0" cellspacing="0" cellpadding="0" data-eewidth="600" ee-type="element"><tbody><tr><td style="padding: 0px; width: 600px; font-size: 1px;"><img width="10" height="5" style="display: block;" alt="" src="https://i.emlfiles.com/cmpimg/t/s.gif"></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><table width="100%" class="ee_columns ee_element" style="width: 600px; position: relative; table-layout: auto;" border="0" cellspacing="0" cellpadding="0" data-edit="columns" data-eewidth="600" ee-type="container" data-title="3 columns">
  <tbody><tr>
    <td width="33%" align="left" class="ee_dropzone ved-scaled-cols" valign="top" style="padding: 0px; width: 194px;"><table width="100%" class="ee_element" style="width: 194px; table-layout: auto;" border="0" cellspacing="0" cellpadding="0" data-eewidth="194" ee-type="element">
      <tbody>
        <tr>
          <td style="padding: 0px; width: 194px;">
            <img width="194" height="194" class="ee_editable vedpw194" style="width: 194px; height: 194px; display: block;" alt="" src="https://scaler.ddglib.com/vedimage/cmpimg/2010/21170/1633999_20111014_caldene.jpg?w=194&amp;cid=5528741&amp;uid=21170" border="0"></td>
        </tr>
      </tbody>
      </table><table class="ee_element ee_borders eeb_width" style="width: 194px; table-layout: auto;" cellspacing="0" cellpadding="0" data-eewidth="194">
      <tbody>
        <tr>
          <td class="ee_pad" style="padding: 5px; width: auto;">
            <div class="ee_editable eev_element" style="width: 184px; position: static;" ee-type="element"><p style="margin: 0px; text-align: center;"><a style="text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px; text-decoration: none;" href="http://www.derbyhouse.co.uk/Equestrian/Horse/Horse+Boots++Safety/Bandages+and+Pads/Equilibrium+Stretch++Flex+Bandages_311-0057.htm?utm_source=INSERT_SOURCE_NAME_HERE&utm_medium=email&utm_campaign=INSERT_CAMPAIGN_NAME_HERE">Equilibrium&nbsp;Stretch &amp; Flex Bandages</a></p><div style="font-family: trebuchet ms, helvetica, arial, sans-serif; font-size: 24px;"><p style="margin: 0px; font-family: times, times new roman, serif; font-size: 16px;">&nbsp;&nbsp;&nbsp;</p><p style="margin: 0px; text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px;"><a style="text-align: center; color: rgb(149, 13, 51); line-height: 20px; font-family: times, times new roman, serif; font-size: 20px; text-decoration: none;" href="http://www.derbyhouse.co.uk/Equestrian/Horse/Horse+Boots++Safety/Bandages+and+Pads/Equilibrium+Stretch++Flex+Bandages_311-0057.htm?utm_source=INSERT_SOURCE_NAME_HERE&utm_medium=email&utm_campaign=INSERT_CAMPAIGN_NAME_HERE">£39.95</a></p></div></div>
          </td>
        </tr>
      </tbody>
      </table></td>
    <td width="8" class="eegap" valign="top" style="padding: 0px; width: 9px;"><img width="8" height="10" style="display: block;" src="https://i.emlfiles.com/cmpimg/t/s.gif"></td>
    <td width="33%" align="left" class="ee_dropzone ved-scaled-cols" valign="top" style="padding: 0px; width: 194px;"><table width="100%" class="ee_element" style="width: 194px; table-layout: auto;" border="0" cellspacing="0" cellpadding="0" data-eewidth="194" ee-type="element">
      <tbody>
        <tr>
          <td style="padding: 0px; width: 194px;">
            <img width="194" height="194" class="ee_editable vedpw194" style="width: 194px; height: 194px; display: block;" alt="" src="https://scaler.ddglib.com/vedimage/cmpimg/2010/21170/1634030_20111014_silverwood.jpg?w=194&amp;cid=5528741&amp;uid=21170" border="0"></td>
        </tr>
      </tbody>
      </table><table class="ee_element ee_borders eeb_width" style="width: 194px; table-layout: auto;" cellspacing="0" cellpadding="0" data-eewidth="194">
      <tbody>
        <tr>
          <td class="ee_pad" style="padding: 5px; width: auto;">
            <div class="ee_editable eev_element" style="width: 184px;" ee-type="element"> <p style="margin: 0px; text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px;"> <!-- Remember to change the link within the href "" --> <a style="text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px; text-decoration: none;" href="http://www.derbyhouse.co.uk/Equestrian/Horse/Horse+Boots++Safety/Bandages+and+Pads/Equilibrium+Stretch++Flex+Bandages_311-0057.htm?utm_source=INSERT_SOURCE_NAME_HERE&utm_medium=email&utm_campaign=INSERT_CAMPAIGN_NAME_HERE">Equilibrium Stretch &amp; Flex Bandages</a></p><p style="margin: 0px; font-family: times, times new roman, serif; font-size: 16px;">&nbsp;&nbsp;&nbsp;</p><p style="margin: 0px; text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px;"><a style="text-align: center; color: rgb(149, 13, 51); line-height: 20px; font-family: times, times new roman, serif; font-size: 20px; text-decoration: none;" href="http://www.derbyhouse.co.uk/Equestrian/Horse/Horse+Boots++Safety/Bandages+and+Pads/Equilibrium+Stretch++Flex+Bandages_311-0057.htm?utm_source=INSERT_SOURCE_NAME_HERE&utm_medium=email&utm_campaign=INSERT_CAMPAIGN_NAME_HERE">£39.95</a></p> </div>
          </td>
        </tr>
      </tbody>
      </table></td>
    <td width="8" class="eegap" valign="top" style="padding: 0px; width: 9px;"><img width="8" height="10" style="display: block;" src="https://i.emlfiles.com/cmpimg/t/s.gif"></td>
    <td width="33%" align="left" class="ee_dropzone ved-scaled-cols" valign="top" style="padding: 0px; width: 194px;"><table width="100%" class="ee_element" style="width: 194px; table-layout: auto;" border="0" cellspacing="0" cellpadding="0" data-eewidth="194" ee-type="element">
      <tbody>
        <tr>
          <td style="padding: 0px; width: 194px;">
            <img width="194" height="194" class="ee_editable vedpw194" style="width: 194px; height: 194px; display: block;" alt="" src="https://scaler.ddglib.com/vedimage/cmpimg/2010/21170/1634013_20111014_headcollars.jpg?w=194&amp;cid=5528741&amp;uid=21170" border="0"></td>
        </tr>
      </tbody>
      </table><table class="ee_element ee_borders eeb_width" style="width: 194px; table-layout: auto;" cellspacing="0" cellpadding="0" data-eewidth="194">
      <tbody>
        <tr>
          <td class="ee_pad" style="padding: 5px; width: auto;">
            <div class="ee_editable eev_element" style="width: 184px;" ee-type="element"><p style="margin: 0px; text-align: center;"><a style="text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px; text-decoration: none;" href="http://www.derbyhouse.co.uk/Equestrian/Horse/Horse+Boots++Safety/Bandages+and+Pads/Equilibrium+Stretch++Flex+Bandages_311-0057.htm?utm_source=INSERT_SOURCE_NAME_HERE&utm_medium=email&utm_campaign=INSERT_CAMPAIGN_NAME_HERE">Equilibrium&nbsp;Stretch &amp; Flex Bandages</a></p><div style="font-family: trebuchet ms, helvetica, arial, sans-serif; font-size: 24px;"><p style="margin: 0px; font-family: times, times new roman, serif; font-size: 16px;">&nbsp;&nbsp;&nbsp;</p><p style="margin: 0px; text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px;"><a style="text-align: center; color: rgb(149, 13, 51); line-height: 20px; font-family: times, times new roman, serif; font-size: 20px; text-decoration: none;" href="http://www.derbyhouse.co.uk/Equestrian/Horse/Horse+Boots++Safety/Bandages+and+Pads/Equilibrium+Stretch++Flex+Bandages_311-0057.htm?utm_source=INSERT_SOURCE_NAME_HERE&utm_medium=email&utm_campaign=INSERT_CAMPAIGN_NAME_HERE">£39.95</a></p></div></div>
          </td>
        </tr>
      </tbody>
      </table>

Answer 1

For anybody using the old Dotmailer templates prior to June 2017

Support: Android <4.4 & iOS

Below is a fix for the 3 column blocks for Dotmailer. For stacking to work there are classes that will need to be placed on your table so iOS can read it.

You will also all your emails will need the meta tag that will make emails responsive

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

What i have done below is change the TD to TH and added classes to those TH's so when media query is read it will break it into rows. Android dropped support for display block on TD some 3 years ago but still reads display block on TH. One drawback for TH is the text are bold, so to cater for that i have placed in CSS (font-weight) that will unbold the text.

	@media only screen and (max-width:480px) {
		.wrapper{width:100% !important;}
		.ee_element td{text-align:center !important;}
		th.Colms {display:block !important; width:100% !important;}
		.CenteredTable{margin:0 auto;}
	}	

<table width="100%" class="ee_columns ee_element wrapper" style="width: 600px; position: relative; table-layout: auto;" border="0" cellspacing="0" cellpadding="0" data-edit="columns" data-eewidth="600" ee-type="container" data-title="3 columns">
  <tbody><tr>
    <th width="33%" align="center" class="ee_dropzone ved-scaled-cols Colms" valign="top" style="padding: 0px; width: 194px;margin:0px;padding:0px; font-weight:normal;"><table width="100%" class="ee_element CenteredTable" style="width: 194px; table-layout: auto;" border="0" cellspacing="0" cellpadding="0" data-eewidth="194" ee-type="element">
      <tbody>
        <tr>
          <td align="center" style="padding: 0px; width: 194px;" class="hundred">
            <img width="194" height="194" class="ee_editable vedpw194" style="width: 194px; height: 194px; display: block;" alt="" src="https://scaler.ddglib.com/vedimage/cmpimg/2010/21170/1633999_20111014_caldene.jpg?w=194&amp;cid=5528741&amp;uid=21170" border="0"></td>
        </tr>
      </tbody>
      </table><table class="ee_element ee_borders eeb_width" style="width: 194px; table-layout: auto;" cellspacing="0" cellpadding="0" data-eewidth="194">
      <tbody>
        <tr>
          <td class="ee_pad" style="padding: 5px; width: auto;">
            <div class="ee_editable eev_element" style="width: 184px; position: static;" ee-type="element"><p style="margin: 0px; text-align: center;"><a style="text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px; text-decoration: none;" href="http://www.derbyhouse.co.uk/Equestrian/Horse/Horse+Boots++Safety/Bandages+and+Pads/Equilibrium+Stretch++Flex+Bandages_311-0057.htm?utm_source=INSERT_SOURCE_NAME_HERE&utm_medium=email&utm_campaign=INSERT_CAMPAIGN_NAME_HERE">Equilibrium&nbsp;Stretch &amp; Flex Bandages</a></p><div style="font-family: trebuchet ms, helvetica, arial, sans-serif; font-size: 24px;"><p style="margin: 0px; font-family: times, times new roman, serif; font-size: 16px;">&nbsp;&nbsp;&nbsp;</p><p style="margin: 0px; text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px;"><a style="text-align: center; color: rgb(149, 13, 51); line-height: 20px; font-family: times, times new roman, serif; font-size: 20px; text-decoration: none;" href="http://www.derbyhouse.co.uk/Equestrian/Horse/Horse+Boots++Safety/Bandages+and+Pads/Equilibrium+Stretch++Flex+Bandages_311-0057.htm?utm_source=INSERT_SOURCE_NAME_HERE&utm_medium=email&utm_campaign=INSERT_CAMPAIGN_NAME_HERE">£39.95</a></p></div></div>
          </td>
        </tr>
      </tbody>
      </table></th>
    <th width="8" class="eegap Colms" valign="top" style="padding: 0px; width: 9px;margin:0px;padding:0px; font-weight:normal;"><img width="8" height="10" style="display: block;" src="https://i.emlfiles.com/cmpimg/t/s.gif"></th>
    <th width="33%" align="left" class="ee_dropzone ved-scaled-cols Colms" valign="top" style="padding: 0px; width: 194px;margin:0px;padding:0px; font-weight:normal;"><table width="100%" class="ee_element CenteredTable" style="width: 194px; table-layout: auto;" border="0" cellspacing="0" cellpadding="0" data-eewidth="194" ee-type="element">
      <tbody>
        <tr>
          <td style="padding: 0px; width: 194px;">
            <img width="194" height="194" class="ee_editable vedpw194" style="width: 194px; height: 194px; display: block;" alt="" src="https://scaler.ddglib.com/vedimage/cmpimg/2010/21170/1634030_20111014_silverwood.jpg?w=194&amp;cid=5528741&amp;uid=21170" border="0"></td>
        </tr>
      </tbody>
      </table><table class="ee_element ee_borders eeb_width CenteredTable" style="width: 194px; table-layout: auto;" cellspacing="0" cellpadding="0" data-eewidth="194">
      <tbody>
        <tr>
          <td class="ee_pad" style="padding: 5px; width: auto;">
            <div class="ee_editable eev_element" style="width: 184px;" ee-type="element"> <p style="margin: 0px; text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px;"> <!-- Remember to change the link within the href "" --> <a style="text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px; text-decoration: none;" href="http://www.derbyhouse.co.uk/Equestrian/Horse/Horse+Boots++Safety/Bandages+and+Pads/Equilibrium+Stretch++Flex+Bandages_311-0057.htm?utm_source=INSERT_SOURCE_NAME_HERE&utm_medium=email&utm_campaign=INSERT_CAMPAIGN_NAME_HERE">Equilibrium Stretch &amp; Flex Bandages</a></p><p style="margin: 0px; font-family: times, times new roman, serif; font-size: 16px;">&nbsp;&nbsp;&nbsp;</p><p style="margin: 0px; text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px;"><a style="text-align: center; color: rgb(149, 13, 51); line-height: 20px; font-family: times, times new roman, serif; font-size: 20px; text-decoration: none;" href="http://www.derbyhouse.co.uk/Equestrian/Horse/Horse+Boots++Safety/Bandages+and+Pads/Equilibrium+Stretch++Flex+Bandages_311-0057.htm?utm_source=INSERT_SOURCE_NAME_HERE&utm_medium=email&utm_campaign=INSERT_CAMPAIGN_NAME_HERE">£39.95</a></p> </div>
          </td>
        </tr>
      </tbody>
      </table></th>
    <th width="8" class="eegap Colms" valign="top" style="padding: 0px; width: 9px;margin:0px;padding:0px; font-weight:normal;"><img width="8" height="10" style="display: block;" src="https://i.emlfiles.com/cmpimg/t/s.gif"></th>
    <th width="33%" align="left" class="ee_dropzone ved-scaled-cols Colms" valign="top" style="padding: 0px; width: 194px;margin:0px;padding:0px; font-weight:normal;"><table width="100%" class="ee_element CenteredTable" style="width: 194px; table-layout: auto;" border="0" cellspacing="0" cellpadding="0" data-eewidth="194" ee-type="element">
      <tbody>
        <tr>
          <td style="padding: 0px; width: 194px;">
            <img width="194" height="194" class="ee_editable vedpw194" style="width: 194px; height: 194px; display: block;" alt="" src="https://scaler.ddglib.com/vedimage/cmpimg/2010/21170/1634013_20111014_headcollars.jpg?w=194&amp;cid=5528741&amp;uid=21170" border="0"></td>
        </tr>
      </tbody>
      </table><table class="ee_element ee_borders eeb_width CenteredTable" style="width: 194px; table-layout: auto;" cellspacing="0" cellpadding="0" data-eewidth="194">
      <tbody>
        <tr>
          <td class="ee_pad" style="padding: 5px; width: auto;">
            <div class="ee_editable eev_element" style="width: 184px;" ee-type="element"><p style="margin: 0px; text-align: center;"><a style="text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px; text-decoration: none;" href="http://www.derbyhouse.co.uk/Equestrian/Horse/Horse+Boots++Safety/Bandages+and+Pads/Equilibrium+Stretch++Flex+Bandages_311-0057.htm?utm_source=INSERT_SOURCE_NAME_HERE&utm_medium=email&utm_campaign=INSERT_CAMPAIGN_NAME_HERE">Equilibrium&nbsp;Stretch &amp; Flex Bandages</a></p><div style="font-family: trebuchet ms, helvetica, arial, sans-serif; font-size: 24px;"><p style="margin: 0px; font-family: times, times new roman, serif; font-size: 16px;">&nbsp;&nbsp;&nbsp;</p><p style="margin: 0px; text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px;"><a style="text-align: center; color: rgb(149, 13, 51); line-height: 20px; font-family: times, times new roman, serif; font-size: 20px; text-decoration: none;" href="http://www.derbyhouse.co.uk/Equestrian/Horse/Horse+Boots++Safety/Bandages+and+Pads/Equilibrium+Stretch++Flex+Bandages_311-0057.htm?utm_source=INSERT_SOURCE_NAME_HERE&utm_medium=email&utm_campaign=INSERT_CAMPAIGN_NAME_HERE">£39.95</a></p></div></div>
          </td>
        </tr>
      </tbody>
      </table>
	  </th>
	  </tr>
	</tbody>
	</table>

If there are any questions/issues please hit me up.

Cheers