HTML для Outlook игнорирует мои фиксированные размеры таблицы (даже в браузере) - PullRequest
Новая
       13

HTML для Outlook игнорирует мои фиксированные размеры таблицы (даже в браузере)

0 голосов
/ 29 января 2019

Я не веб-парень или программист, а просто системный администратор, поэтому я уверен, что просто делаю некоторые очевидные основные ошибки.Я создал отчет по электронной почте для нашей резервной системы, но форматирование сводит меня с ума.Я знаю, что 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 голосов
/ 29 января 2019

Строка, начинающаяся с «Итоги», содержится в совершенно отдельной таблице внизу основной таблицы.

Здесь есть несколько вариантов, но самое быстрое решение - просто удалить теги.завершите таблицу выше и начните новую таблицу: 

<!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>
...