Outlook的HTML忽略了我的固定表尺寸(即使在浏览器中)

时间:2019-01-29 09:51:09

标签: html css outlook

我不是网络人员或编码员,只是系统管理员,所以我确定我只是在犯一些非常明显的基本错误。我已经为备份系统创建了电子邮件报告,但是格式使我发疯。我知道Outlook会产生某些限制-特别是关于CSS的限制,但是我不明白为什么我的格式如此之差。这是HTML的简化版本的图片:

enter image description here

“总计”框应与“备份类型”框对齐,但是当我在Chrome中检查页面时,我看到固定宽度为900的第一个表实际上是918。这是我的HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Email Report</title>
</head>
    <body style='background-color:#dfdfdf;'>
    <table style='width:100%;text-align:left;background-color:#dfdfdf;'>
    <tr>
      <td>
        <br />
        <table border='0' cellpadding='0' width='950' align='center' style='background-color:white; border:solid #bbbbbb 1.0pt; table-layout:fixed;'>
          <tbody>
            <tr>
              <td>
                <table border='0' width='900' cellpadding='0' align='center' style='border-collapse: collapse; table-layout:fixed;'>
                  <tbody>
                    <tr>
                      <td style='background-color: #ebf0f8; border: solid #dddddd 1.0pt; padding-left: 5px;' width='275'><strong><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>Backed up item</span></strong></td>
                      <td align='center' style='background-color: #ebf0f8; border: solid #dddddd 1.0pt;' width='65'><strong><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>Back up type</span></strong></td>
                      <td align='center' style='background-color: #ebf0f8; border: solid #dddddd 1.0pt;' width='70'><strong><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>Replica Space</span></strong></td>
                      <td align='center' style='background-color: #ebf0f8; border: solid #dddddd 1.0pt;' width='70'><strong><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>Recovery Space</span></strong></td>
                      <td align='center' style='background-color: #ebf0f8; border: solid #dddddd 1.0pt;' width='60'><strong><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>Recovery Days</span></strong></td>
                      <td align='center' style='background-color: #ebf0f8; border: solid #dddddd 1.0pt;' width='65'><strong><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>Recovery Points</span></strong></td>
                      <td align='center' style='background-color: #ebf0f8; border: solid #dddddd 1.0pt;' width='115'><strong><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>Last On-Site Backup</span></strong></td>
                      <td align='center' style='background-color: #ebf0f8; border: solid #dddddd 1.0pt;' width='115'><strong><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>Last Azure Backup</span></strong></td>
                      <td align='center' style='background-color: #ebf0f8; border: solid #dddddd 1.0pt;' width='65'><strong><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>Status</span></strong></td>
                    </tr>
                    <tr>
                      <td style='background-color: #ffffff; border: solid #dddddd 1.0pt; border-collapse: collapse; padding-left: 5px;' width='275'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color:#444444;'>ReportServer$DPM2016TempDB</span></td>
                      <td align='center' style='background-color: #ffffff; border: solid #dddddd 1.0pt; border-collapse: collapse;' width='65'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color:#444444;'>SQL Data</span></td>
                      <td align='center' style='background-color: #ffffff; border: solid #dddddd 1.0pt; border-collapse: collapse;' width='70'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color:#444444;'>1 GB</span></td>
                      <td align='center' style='background-color: #ffffff; border: solid #dddddd 1.0pt; border-collapse: collapse;' width='70'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color:#444444;'>1 GB</span></td>
                      <td align='center' style='background-color: #ffffff; border: solid #dddddd 1.0pt; border-collapse: collapse;' width='60'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color:#444444;'>30</span></td>
                      <td align='center' style='background-color: #ffffff; border: solid #dddddd 1.0pt; border-collapse: collapse;' width='65'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color:#444444;'>30</span></td>
                      <td align='center' style='background-color: #ffffff; border: solid #dddddd 1.0pt; border-collapse: collapse;' width='115'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color:444444;'>20:01 28/01/2019</span></td>
                      <td align='center' style='background-color: #ffffff; border: solid #dddddd 1.0pt; border-collapse: collapse;' width='115'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>N/A</span></td>
                      <td align='center' style='background-color: #ffffff; border: solid #dddddd 1.0pt; border-collapse: collapse;' width='65'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color:#444444;'><strong style='color:#008100;'>SUCCESS</strong></span></td>
                    </tr>
                  </tbody>
                </table>
                <table border='0' width='900' cellpadding='0' align='center' style='border-collapse: collapse;table-layout:fixed;'>
                  <tbody>
                    <tr>
                      <td style='background-color: #ffffff; border: solid #ffffff 1.0pt; border-collapse: collapse; padding-left: 5px;' width='275'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>&nbsp;</span></td>
                      <td align='center' style='background-color: #ebf0f8; border: solid #dddddd 1.0pt; border-collapse: collapse;' width='65'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>Totals</span></td>
                      <td align='center' style='background-color: #ebf0f8; border: solid #dddddd 1.0pt; border-collapse: collapse;' width='70'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>6 GB</span></td>
                      <td align='center' style='background-color: #ebf0f8; border: solid #dddddd 1.0pt; border-collapse: collapse;' width='70'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>12 GB</span></td>
                      <td align='center' style='background-color: #ffffff; border: solid #ffffff 1.0pt; border-collapse: collapse;' width='420'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>&nbsp;</span></td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

任何提示将不胜感激。

1 个答案:

答案 0 :(得分:0)

以“总计”开头的行包含在主表底部的完全独立的表中。

这里有几个选项,但是最快的解决方法是简单地删除结束上面表格的标签并开始一个新表格:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Email Report</title>
</head>
    <body style='background-color:#dfdfdf;'>
    <table style='width:100%;text-align:left;background-color:#dfdfdf;'>
    <tr>
      <td>
        <br />
        <table border='0' cellpadding='0' width='950' align='center' style='background-color:white; border:solid #bbbbbb 1.0pt; table-layout:fixed;'>
          <tbody>
            <tr>
              <td>
                <table border='0' width='900' cellpadding='0' align='center' style='border-collapse: collapse; table-layout:fixed;'>
                  <tbody>
                    <tr>
                      <td style='background-color: #ebf0f8; border: solid #dddddd 1.0pt; padding-left: 5px;' width='275'><strong><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>Backed up item</span></strong></td>
                      <td align='center' style='background-color: #ebf0f8; border: solid #dddddd 1.0pt;' width='65'><strong><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>Back up type</span></strong></td>
                      <td align='center' style='background-color: #ebf0f8; border: solid #dddddd 1.0pt;' width='70'><strong><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>Replica Space</span></strong></td>
                      <td align='center' style='background-color: #ebf0f8; border: solid #dddddd 1.0pt;' width='70'><strong><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>Recovery Space</span></strong></td>
                      <td align='center' style='background-color: #ebf0f8; border: solid #dddddd 1.0pt;' width='60'><strong><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>Recovery Days</span></strong></td>
                      <td align='center' style='background-color: #ebf0f8; border: solid #dddddd 1.0pt;' width='65'><strong><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>Recovery Points</span></strong></td>
                      <td align='center' style='background-color: #ebf0f8; border: solid #dddddd 1.0pt;' width='115'><strong><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>Last On-Site Backup</span></strong></td>
                      <td align='center' style='background-color: #ebf0f8; border: solid #dddddd 1.0pt;' width='115'><strong><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>Last Azure Backup</span></strong></td>
                      <td align='center' style='background-color: #ebf0f8; border: solid #dddddd 1.0pt;' width='65'><strong><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>Status</span></strong></td>
                    </tr>
                    <tr>
                      <td style='background-color: #ffffff; border: solid #dddddd 1.0pt; border-collapse: collapse; padding-left: 5px;' width='275'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color:#444444;'>ReportServer$DPM2016TempDB</span></td>
                      <td align='center' style='background-color: #ffffff; border: solid #dddddd 1.0pt; border-collapse: collapse;' width='65'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color:#444444;'>SQL Data</span></td>
                      <td align='center' style='background-color: #ffffff; border: solid #dddddd 1.0pt; border-collapse: collapse;' width='70'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color:#444444;'>1 GB</span></td>
                      <td align='center' style='background-color: #ffffff; border: solid #dddddd 1.0pt; border-collapse: collapse;' width='70'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color:#444444;'>1 GB</span></td>
                      <td align='center' style='background-color: #ffffff; border: solid #dddddd 1.0pt; border-collapse: collapse;' width='60'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color:#444444;'>30</span></td>
                      <td align='center' style='background-color: #ffffff; border: solid #dddddd 1.0pt; border-collapse: collapse;' width='65'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color:#444444;'>30</span></td>
                      <td align='center' style='background-color: #ffffff; border: solid #dddddd 1.0pt; border-collapse: collapse;' width='115'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color:444444;'>20:01 28/01/2019</span></td>
                      <td align='center' style='background-color: #ffffff; border: solid #dddddd 1.0pt; border-collapse: collapse;' width='115'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>N/A</span></td>
                      <td align='center' style='background-color: #ffffff; border: solid #dddddd 1.0pt; border-collapse: collapse;' width='65'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color:#444444;'><strong style='color:#008100;'>SUCCESS</strong></span></td>
                    </tr>
                  </tbody>
                <!--  
                </table>
                <table border='0' width='900' cellpadding='0' align='center' style='border-collapse: collapse;table-layout:fixed;'>
                  <tbody>
                -->
                    <tr>
                      <td style='background-color: #ffffff; border: solid #dddddd 1.0pt; border-collapse: collapse; padding-left: 5px;' width='275'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color:#444444;'>&nbsp;</span></td>
                      <td align='center' style='background-color: #ebf0f8; border: solid #dddddd 1.0pt; border-collapse: collapse;' width='65'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>Totals</span></td>
                      <td align='center' style='background-color: #ebf0f8; border: solid #dddddd 1.0pt; border-collapse: collapse;' width='70'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>6 GB</span></td>
                      <td align='center' style='background-color: #ebf0f8; border: solid #dddddd 1.0pt; border-collapse: collapse;' width='70'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>12 GB</span></td>
                      <td align='center' style='background-color: #ffffff; border: solid #ffffff 1.0pt; border-collapse: collapse;' width='420'><span style='font-size: 8.5pt; font-family: Arial,sans-serif; color: #444444;'>&nbsp;</span></td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>