电子邮件中的HTML呈现（即Outlook）

Question

我有一个存储过程，可以查询数据并将数据输出到电子邮件中。我的任务是在电子邮件中添加一个图例，该图例说明了电子邮件中表格中显示的结果。我正在使用HTML编辑器保存文件并在我的浏览器（Chrome）中打开它，看起来我想要它（截图1）。

然而，当我执行sproc并将电子邮件发送给我时，布局全部关闭（截图2）。我查看了电子邮件的html源代码，它看起来就像我将其输入到存储过程中一样。请忽略阻止联系信息的黑匣子。

这是我的程序中的声明，它将此部分添加到电子邮件的开头。联系信息位于其自己的浮动表中（左侧），图例位于其自己的浮动表中（右侧）

我可以采取哪些措施来解决HTML电子邮件呈现问题吗？

    select
        @HeaderHTML = @HeaderHTML + '
            <br />
            <div>
            <table style="float:left">
                <tr>
                    <td style="padding: 0; margin: 0; text-align: left; font-size: 12px;" align="left">The Questionable Claims email alerts you to claims determined to be anomalies.  Please click the Rx.Refill number for additional detail.</td>
                </tr>
                <tr>
                    <td style="padding: 0; margin: 0; text-align: left; font-size: 12px;" align="left">For any questions, contact ...... support at ....... or by calling ........</td><br>
                </tr>
                <tr>
                    <th style="padding: 0; margin: 0; text-align: left; font-size: 18px;" align="left"># of Stores: 19</th>
                </tr>
            </table>
            <table style="float:right; margin-bottom: 15px; margin-right: 100px" frame="box">
                 <tr>
                   <td style="padding: 0; text-align: center; font-size: 18px;"><u>Rule Violation Key</u></td>
                  </tr>
                  <tr>
                   <td style="padding: 0; text-align: left; font-size: 14px;"><b>1</b> - GPM > 300%</td>
                  </tr>
                  <tr>
                   <td style="padding: 0; text-align: left; font-size: 14px;"><b>2</b> - GPM < -100%</td>
                  </tr>
                  <tr>
                   <td style="padding: 0; text-align: left; font-size: 14px;"><b>3</b> - Contract Cost = $0.00</td>
                  </tr>
                  <tr>
                   <td style="padding: 0; text-align: left; font-size: 14px;"><b>4</b> - Cash Claim Copay = $0.00</td>
                  </tr>
                  <tr>
                   <td style="padding: 0; text-align: left; font-size: 14px;"><b>5</b> - Copay on Fills < $0.00</td>
                  </tr>
                  <tr>
                   <td style="padding: 0; text-align: left; font-size: 14px;"><b>6</b> - Claim Amount on Fills < $0.00</td>
                  </tr>
            </table>
            </div>
            <br />'