Outlook 中的 HTML 表格对齐问题

Question

我在 Outlook 中遇到对齐问题。我在邮件中发送以下 HTML 代码。

<strong>Test Summury</strong><br> 
<table border=0> 
<tr style='width:100%;display:block'> 
<td valign="middle" style='white-space:nowrap;width:100%;display:block;font-family:sans-serif;font-size:100%;color:#494961;padding:0px 2px;line-height:23px;letter-spacing:0.027em;word-spacing:0;width:100%'> 
<img src='https://ci5.googleusercontent.com/proxy/8S3emk_N9__9dGjV9Sj9qnYVQWLj6dp4ukTDwGoDq3esYAjOleQ_g8PNqrI8-a_FCVltErovcE0AhZwr6L-I_lutmAu8RgE3oi38y-8=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/Duration.png' style='display:inline;margin:5px 0 0 0'> 
<p style='display:inline-block;width:15%;margin-left:5px'><b>2 min</b><br>Duration</p> 
<img src='https://ci6.googleusercontent.com/proxy/J9_xwl9q8wAIQw7DMq1CkOAKmMhDK9padlPL1jlpzwruQ9lquwQs-sl9g0gfSUdSo0UHny5IQC0VaqxliEL3QZHgdaT1mt4mkAA=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/users.png' style='display:inline;margin:10px 0 0 0'> 
<p style='width:13%;margin-left:11px;display:inline-block'><b>12 vu</b><br>Max Users</p> 
<img src='https://ci5.googleusercontent.com/proxy/G05_y_qOOgjUTuvc3Jnllh_DnglVGpp86Sp9BhTi0cCV7-BJUjht8APtujeMwTL-pMEh7WQkH_PyY1L5UyTtxaFWyWasJiUfBQ=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/Hits.png' style='display:inline;margin:10px 0 5px 20px'> 
<p style='width:20%;margin-left:11px;display:inline-block'><b>13 Hits/s</b><br>Avg Throughput</p> 
<img src='https://ci5.googleusercontent.com/proxy/uzImvaoO6Qkxx3A9uC7cV6rZ6qndIo6LRux-l2MylOkfvLU1VflPp_wNdQFdhjDTsZb2cGCfOSe9pXaMbasIq2nS6lS9BrM_3f7b=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/Errors.png' style='display:inline;margin:5px 0 5px 20px'> 
<p style='width:11%;display:inline-block;margin-left:11px'><b>100%</b><br>Error</p> 
</td></tr></table>

在 gmail 中，它按照我的需要对齐，

但是在 outlook 电子邮件中它会被扭曲。

Answer 1

正如其他人所说，您的代码需要大量工作。以下是我对您的代码所做的。我把你的图片和段落标签放在一张 table 旁边的 div 里。您会注意到 outlook 条件语句，这些语句仅由 outlook 准备。

这种编码方法称为幽灵列，是混合编码的一部分。

<table width="100%" border=0 cellpadding="0" cellspacing="0"> 
<tr> 
<td align="center" valign="middle"> 
<div style="width:24%; vertical-align:top; display:inline-block;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="top"><img src='https://ci5.googleusercontent.com/proxy/8S3emk_N9__9dGjV9Sj9qnYVQWLj6dp4ukTDwGoDq3esYAjOleQ_g8PNqrI8-a_FCVltErovcE0AhZwr6L-I_lutmAu8RgE3oi38y-8=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/Duration.png' style='display:inline;margin:5px 0 0 0'></td>
  </tr>
  <tr>
    <td align="center" valign="top" style='font-family:sans-serif;font-size:100%;color:#494961;padding:0px 2px;line-height:23px;letter-spacing:0.027em;word-spacing:0;'><b>2 min</b><br>Duration</p></td>
  </tr>
</table>


</div>
 <!--[if gte mso 9]>
  </td>
    <td width="25%">
  <![endif]--> 
  <div style="width:24%; vertical-align:top; display:inline-block;">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="top"><img src='https://ci6.googleusercontent.com/proxy/J9_xwl9q8wAIQw7DMq1CkOAKmMhDK9padlPL1jlpzwruQ9lquwQs-sl9g0gfSUdSo0UHny5IQC0VaqxliEL3QZHgdaT1mt4mkAA=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/users.png' style='display:inline;margin:10px 0 0 0'> </td>
  </tr>
  <tr>
    <td align="center" valign="top" style='font-family:sans-serif;font-size:100%;color:#494961;padding:0px 2px;line-height:23px;letter-spacing:0.027em;word-spacing:0;'><b>12 vu</b><br>Max Users</p></td>
  </tr>
</table>


 </div>
 <!--[if gte mso 9]>
  </td>
    <td width="25%">
  <![endif]--> 
<div style="width:24%; vertical-align:top; display:inline-block;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="top"><img src='https://ci5.googleusercontent.com/proxy/G05_y_qOOgjUTuvc3Jnllh_DnglVGpp86Sp9BhTi0cCV7-BJUjht8APtujeMwTL-pMEh7WQkH_PyY1L5UyTtxaFWyWasJiUfBQ=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/Hits.png' style='display:inline;margin:10px 0 5px 20px'> </td>
  </tr>
  <tr>
    <td align="center" valign="top" style='font-family:sans-serif;font-size:100%;color:#494961;padding:0px 2px;line-height:23px;letter-spacing:0.027em;word-spacing:0;'><b>13 Hits/s</b><br>Avg Throughput</p></td>
  </tr>
</table>

</div> 
 <!--[if gte mso 9]>
  </td>
    <td width="25%">
  <![endif]--> 
<div style="width:24%; vertical-align:top; display:inline-block;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="top"><img src='https://ci5.googleusercontent.com/proxy/uzImvaoO6Qkxx3A9uC7cV6rZ6qndIo6LRux-l2MylOkfvLU1VflPp_wNdQFdhjDTsZb2cGCfOSe9pXaMbasIq2nS6lS9BrM_3f7b=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/Errors.png' style='display:inline;margin:5px 0 5px 20px'> </td>
  </tr>
  <tr>
    <td align="center" valign="top" style='font-family:sans-serif;font-size:100%;color:#494961;padding:0px 2px;line-height:23px;letter-spacing:0.027em;word-spacing:0;'><b>100%</b><br>Error</p></td>
  </tr>
</table>

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

如果这就是您想要的答案，请告诉我。