Вертикально выровнять текст разных размеров шрифта в соседних ячейках таблицы

Question

Я пытаюсь выровнять текст разных размеров шрифта, содержащихся в соседних ячейках таблицы, в html-письме.

код:

<tr> 
    <td> 
    <table cellspacing="0" cellpadding="0" border="0"> 
    <tbody> 
     <tr> 
     <td style="font-size: 40px; font-family: Calibri, Arial, Helvetica, sans-serif; color:#35C7E0; font-weight: bold; mso-line-height-rule:exactly; line-height: 40px;" valign="bottom">2.</td> 
     <td width="15" style="width: 15px; font-size: 18px; line-height: 40px;">&nbsp;</td> 
     <td style="font-family: Arial, sans-serif; font-size: 18px; color: #35C7E0; text-align: left; mso-line-height-rule:exactly; line-height: 40px;" valign="bottom">Product Demonstrations</td> 
     </tr> 
    </tbody> 
    </table> 
    </td> 
</tr> 

Моя проблема заключается в текст во второй ячейке (Антидопинговый) появляется ниже «2» в первой ячейке в Outlook 2010 и 2013, но выглядит хорошо в Outlook 2011 и 2016. Как я могу исправить это, чтобы весь текст выглядел равномерно выровненным снизу во всех версиях Outlook?

Answer 1

Outlook 2007-10-13 dosnt понять valign = нижний текст, поэтому вам понадобится другая таблица в вашем последнем td и сделайте эту таблицу valign = bottom. Я также добавил немного подкладки, чтобы выровнять его с «2».

<table cellspacing="0" cellpadding="0" border="0"> 
<tr> 
    <td> 
     <table cellspacing="0" cellpadding="0" border="0"> 
      <tbody> 
       <tr> 
        <td style="font-size: 40px; font-family: Calibri, Arial, Helvetica, sans-serif; color:#35C7E0; font-weight: bold; mso-line-height-rule:exactly; line-height: 40px;" valign="bottom">2.</td> 
        <td width="15" style="width: 15px; font-size: 18px; line-height: 40px;">&nbsp;</td> 
        <td valign="bottom"> 
         <table cellspacing="0" cellpadding="0" border="0"> 
          <tr> 
           <td style="font-family: Arial, sans-serif; font-size: 18px; color: #35C7E0; text-align: left; mso-line-height-rule:exactly; line-height: 100%; padding-bottom: 5px"> Lorem ipsum 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </td> 
</tr>