如何在表格中实现<td>元素底部对齐

要实现三列文本顶部对齐、按钮底部对齐的效果，核心是让所有列的容器统一顶部对齐，同时让每列内部的按钮容器自动贴靠列的底部。以下是调整后的代码及关键修改点：

关键修改说明 #

• 给所有列的外层.column表格统一添加vertical-align: top，包括MSO条件注释内的<td>设置valign="top"，确保三列整体顶部对齐。
• 给每个列的内层padding单元格添加height: 100%;，让内容容器可以继承列的高度。
• 将每列的内容表格设置为height: 100%;，文本单元格保持valign: top，按钮单元格设置valign="bottom"，实现按钮自动贴底。

修改后的完整代码 #

<!-- START THREE COLUMNS -->
<tr>
   <td style="padding: 30px 0 40px 0;">
      <table width="100%" style="border-spacing:0;" role="presentation">
         <tr>
            <td class="three-columns" style="padding:0;font-size:0;text-align: center;">

               <!--[if mso]>
                  <table width="100%" style="border-spacing:0;" role="presentation">
                  <tr>
                  <td width="200" valign="top" style="padding: 0;">
               <![endif]-->

               <table class="column" style="border-spacing:0;width: 100%;max-width: 200px;display: inline-block;vertical-align: top;" role="presentation">
                  <tr>
                     <td class="padding" style="padding:15px;height: 100%;">

                        <table class="content" style="border-spacing:0;text-align: center;height: 100%;" role="presentation">
                           <tr>
                              <td style="padding:10px 10px 20px 10px;valign: top;">
                                 <p style="font-size: 15px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quisquam nostrum, reprehenderit consequatur odio sint sed, illo adipisci laudantium soluta animi tempora qui obcaecati maiores aut. Laboriosam esse expedita dolorum.</p>
                              </td>
                           </tr>
                           <tr>
                              <td align="center" valign="bottom" style="vertical-align: bottom;">
                                 <table align="center" role="presentation" style="border-spacing:0;">
                                    <tr>
                                       <td align="center" style="border-radius:10px;" bgcolor="#fff">
                                          <a href="https://example.com/14" target="_blank" style="font-size: 15px;font-weight: bold;text-decoration: none;color: #000;background-color: #fff;padding:8px 20px;border: 1px solid #fff;border-radius: 10px;display: inline-block;">
                                             Email Audience
                                          </a>
                                       </td>
                                    </tr>
                                 </table>
                              </td>
                           </tr>
                        </table>

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

               <!--[if mso]>
               </td><td width="200" valign="top" style="padding: 0;">
               <![endif]-->

               <table class="column" style="border-spacing:0;width: 100%;max-width: 200px;display: inline-block;vertical-align: top;" role="presentation">
                  <tr>
                     <td class="padding" style="padding:15px;height: 100%;">

                        <table class="content" style="border-spacing:0;text-align: center;height: 100%;" role="presentation">
                           <tr>
                              <td style="padding:10px 10px 20px 10px;valign: top;">
                                 <p style="font-size: 15px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas explicabo iure praesentium obcaecati eaque? Quod, assumenda.</p>
                              </td>
                           </tr>
                           <tr>
                              <td align="center" valign="bottom" style="vertical-align: bottom;">
                                 <table align="center" role="presentation" style="border-spacing:0;">
                                    <tr>
                                       <td align="center" style="border-radius:10px;" bgcolor="#000">
                                          <a href="https://example.com/16" target="_blank" style="font-size: 15px;font-weight: bold;text-decoration: none;color: #ffffff;background-color: #000;padding:8px 20px;border: 1px solid #000;border-radius: 10px;display: inline-block;">
                                             Second Button
                                          </a>
                                       </td>
                                    </tr>
                                 </table>
                              </td>
                           </tr>
                        </table>

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

               <!--[if mso]>
               </td><td width="200" valign="top" style="padding: 0;">
               <![endif]-->

               <table class="column" style="border-spacing:0;width: 100%;max-width: 200px;display: inline-block;vertical-align: top;" role="presentation">
                  <tr>
                     <td class="padding" style="padding:15px;height: 100%;">

                        <table class="content" style="border-spacing:0;text-align: center;height: 100%;" role="presentation">
                           <tr>
                              <td style="padding:10px 10px 20px 10px;valign: top;">
                                 <p style="font-size: 15px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam ipsum aspernatur neque odit dolorem molestias consequatur enim consectetur dicta ab rem provident deserunt expedita, id quas doloremque illo dignissimos! Blanditiis!</p>
                              </td>
                           </tr>
                           <tr>
                              <td align="center" valign="bottom" style="vertical-align: bottom;">
                                 <table align="center" role="presentation" style="border-spacing:0;">
                                    <tr>
                                       <td align="center" style="border-radius:10px;" bgcolor="#fff">
                                          <a href="https://example.com/18" target="_blank" style="font-size: 15px;font-weight: bold;text-decoration: none;color: #000;background-color: #fff;padding:8px 20px;border: 1px solid #fff;border-radius: 10px;display: inline-block;">
                                             Third Button
                                          </a>
                                       </td>
                                    </tr>
                                 </table>
                              </td>
                           </tr>
                        </table>

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

               <!--[if mso]>
                  </td>
                  </tr>
                  </table>
               <![endif]-->

            </td>
         </tr>
      </table>
   </td>
</tr>
<!-- END THREE COLUMNS -->

补充说明 #

邮件客户端对CSS的兼容性差异较大，尤其是Outlook依赖MSO条件注释和HTML表格属性（如valign）。上述修改同时兼顾了现代邮件客户端和Outlook的渲染效果，确保文本顶部对齐、按钮统一贴靠列底部。

内容的提问来源于stack exchange，提问作者Drew