HTML 전자 메일의 TD 높이 맞추기

현재 HTML 전자 메일을 작성 중입니다. 모든 전자 메일 클라이언트에서 두 TD를 동일한 높이로 만드는 데 실제 문제가 있습니다.HTML 전자 메일의 TD 높이 맞추기

응답 성이 뛰어난 이메일이므로 두 열을 동일한 테이블 아래에 중첩하지 않고 두 테이블로 나누어 서로를 모바일에 놓을 수 있습니다.

필자는 TD와 테이블 모두에서 거의 성공하지 못했지만, 결국에는 최소 높이로 던져 보았습니다.

필자는 모든 웹 기반 브라우저 (야후 제외)에서 잘 작동한다고 말해야합니다. 내 큰 문제는 Outlook 2007 & 2010과 같습니다. 클라이언트는 실제로 충분히 성가신 메일을 테스트합니다. 여기

은 샘플입니다 :

<!-- 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>

출처

2013-03-02 Chris Robinson

<td>에 대한 높이가 항상 고정 된 경우이 투명한 이미지가 보이지 않는 것, <td>에 <img src="http://somesite.com/dot.png" style="width:1px;height:640px" />을 삽입 할 수 있으므로 <td>가 같은 분을해야합니다, 높이가 고정되어 - 이미지로서의 높이.

출처

2013-03-02 13:41:12 wearwoolf

그래, 슬프고 wearwoolf로 td의 min-height 속성을 강제로 사용할 수 있습니다. td의 보이지 않는 이미지를 넣거나 div로 td를 감 쌉니다. 첫 번째 사례의 예 :

<td><img style="float:left;min-height:50px;visibility:hidden;width:0px;">12345</td>

출처

2013-05-21 12:41:45 macloving

HTML 전자 메일의 TD 높이 맞추기

답변

관련 문제