0

I'm currently building a HTML email and I'm having real issues with making two TD's the same height on all email clients.

It's a responsive email so I've separated the columns into two tables instead of nesting it all under the same one so they can snap underneath each other on mobiles.

I've tried stating the heights in both the TD's and the tables both with little success, in the end I even threw in a min-height.

I should say that it works fine on all web based browsers (except yahoo) my big problem is with outlook 2007 & 2010 which is what the client actually tests the emails on annoyingly enough.

Here's a sample:

<!-- square panels wrapper -->
<table width="600" border="0" cellpadding="0" cellspacing="0" class="square_panel_wrapper"><tr><td>

    <!-- square panels container -->
    <table width="600" border="0" cellpadding="0" cellspacing="0" class="square_panel_container"><tr><td>

        <!-- left table -->
        <table width="290" height="640" border="0" cellpadding="10" cellspacing="0" align="left" class="square_panel_left" style="border: 1px solid #c8c9cb; height: 640px; min-height: 640px;">
          <tr>
            <td valign="top" align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #414042; line-height:1.5em; text-align: left; vertical-align: top;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae commodo leo</td>
          </tr>
          <tr>
            <td valign="top" align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #414042; line-height:1.5em; text-align: left; vertical-align: top;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae commodo leo</td>
          </tr>
        </table>

        <!-- right table -->
        <table align="right" width="290" height="640" border="0" cellpadding="10" cellspacing="0" class="square_panel_right" style="border: 1px solid #c8c9cb; height: 640px; min-height: 640px;">
            <tr>
              <td valign="top" align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #414042; line-height:1.5em; margin-top: 0px;  text-align: left; vertical-align: top;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae commodo leo. Aenean molestie tristique erat a consequat. Vestibulum nec nunc vel velit ornare fermentum in eget ipsum. Mauris venenatis volutpat malesuada. Curabitur fringilla libero at turpis tempor egestas quis rhoncus quam.  
            </td>
          </tr>
          <tr>
            <td valign="top" align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #414042; line-height:1.5em; text-align: left; vertical-align: top;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae commodo leo</td>
          </tr>
        </table>

    </td></tr></table>

</td></tr></table>
4

2 回答 2

0

是的，作为正确的悲伤wearwoolf，您可以强制对 td 使用 min-height 属性 - 将不可见的图像放入 td，或者将您的 td 包装到 div 中。第一种情况的示例：

<td><img style="float:left;min-height:50px;visibility:hidden;width:0px;">12345</td>
于 2013-05-21T12:41:45.157 回答
0

如果高度<td>总是固定的，您可以尝试插入<img src="http://somesite.com/dot.png" style="width:1px;height:640px" />，<td>这个透明图像将不可见并且具有固定高度，因此您<td>将具有与图像相同的最小高度。

于 2013-03-02T13:41:12.567 回答