2015-04-01 2 views
0

Я пытаюсь удалить три границы ячеек из таблицы в почте HTML. Моя текущая ситуация такова:Удалить границу ячейки в почте HTML в Outlook 2013

То, что я What I have

То, что я хочу What I want

Код:

<html> 

    <head> 

     <style type="text/css"> 

      body 
      { 
       font-family:Calibri, Arial, Sans-Serif; 
       font-weight:normal; 
      } 

      table 
      { 
       font-family:Calibri, Arial, Sans-Serif; 
       font-weight:normal; 
       font-size:14px; 
       border-color:#CCCCCC; 
       border-collapse:collapse; 
       width:700px; 
      } 

      table th 
      {   
       font-weight:bold;    
       padding:10px 5px; 
       border-style:solid; 
       border-width:1px; 
       word-break:normal; 
       border-color:#CCCCCC; 
       background-color:#F0F0F0; 
      } 

      table td 
      { 
       padding:10px 5px; 
       border-style:solid; 
       border-width:1px; 
       word-break:normal; 
       border-color:#CCCCCC; 
       background-color:#FFFFFF; 
      } 

      .td-left-column 
      { 
       font-style:italic; 
       background-color:#F0F0F0; 
       text-align:right; 
       white-space:nowrap; 
       width:100px; 
      } 

      p.italic 
      { 
       font-style:italic 
      } 

     </style> 

    </head> 

    <body> 

     The script 

     <br><br> 

     <em>' + $ScriptName + '</em> 

     has sent a notification. See below for details... 

     <br><br> 

     <table> 

      <tr> 
       <th colspan="2">Script</th> 
      </tr> 

      <tr> 
       <td class="td-left-column">Path</td> 
       <td>' + $ScriptPath + '</td> 
      </tr> 

      <tr> 
       <td class="td-left-column">Server</td> 
       <td>' + $Server + '</td> 
      </tr> 

      <tr> 
       <td class="td-left-column">Name</td> 
       <td>' + $ScriptName + '</td> 
      </tr> 

      <tr> 
       <td class="td-left-column">Log-File</td> 
       <td>' + $LogFileCell + '</td> 
      </tr> 

     </table>     

     <table> 

      <tr> 
       <th colspan="5">Backup Report</th> 
      </tr> 

      <tr> 
       <td class="td-left-column" colspan="2">Path</td> 
       <td colspan="3">' + $BckpDir + '</td> 
      </tr> 

      <tr> 
       <td class="td-left-column" colspan="2">Save Type</td> 
       <td colspan="3">' + $SaveType + '</td> 
      </tr> 

      <tr> 
       <td class="td-left-column" colspan="2">Objects Saved</td> 
       <td colspan="3">' + $FilesSaved + '/' + $TotalBckpFiles + '</td> 
      </tr> 

      <tr> 
       <td class="td-left-column" colspan="2">Start</td> 
       <td colspan="3">' + $Date + ' // ' + $Time + '</td> 
      </tr> 

      <tr> 
       <td class="td-left-column" colspan="2">End</td> 
       <td colspan="3">' + (Get-Date -Format d) + ' // ' + (Get-Date -Format t) + '</td> 
      </tr> 

      <tr> 
       <td class="td-left-column" style="width:50px;"></td> 
       <td class="td-left-column" style="width:50px;">Task</td> 

       <td style="width:200px;text-align:center"><b>FTP Download</b></td> 
       <td style="width:200px;text-align:center"><b>WinRAR Archive</b></td> 
       <td style="width:200px;text-align:center"><b>Total</b></td> 
      </tr> 

      <tr> 
       <td class="td-left-column" style="width:50px;"></td> 
       <td class="td-left-column" style="width:50px;">RunTime</td> 

       <td style="width:200px;text-align:center">' + $FTPDLRT + '</td> 
       <td style="width:200px;text-align:center">' + $ArchiveRT + '</td> 
       <td style="width:200px;text-align:center">' + $BckpRT + '</td> 
      </tr> 

      <tr> 
       <td class="td-left-column" colspan="2">Size</td> 
       <td colspan="3">' + [System.Math]::Round(($BckpSize/1GB), 1) + ' GB</td> 
      </tr> 

      ' + $CompSize + ' 

      <tr> 
       <td class="td-left-column" colspan="2">Free Disk Space</td> 
       <td colspan="3">' + [System.Math]::Round(($BckpDsk.FreeSpace/1TB), 1) + ' TB</td> 
      </tr> 

     </table> 

     <br><br> 

     <table> 

      <tr> 
       <th style="width:100px">ID</th> 

       <th style="width:200px">File Name</th> 

       <th style="width:200px">Size</th> 

       <th style="width:200px">Status</th> 
      </tr> 

      ' + $AllFileRows + ' 

     </table> 

    </body> 

</html> 

До сих пор я попробовал, установив цвет границы к цвету фона ячейки, но не повезло. Скрытие границы с border-bottom-style:hidden также не работает.

Еще более запутанным является то, что когда я добавляю border-left-color:#F0F0F0 в <td class="td-left-column" style="width:50px;"></td>, левая граница исчезает. Когда я пытаюсь сделать это для правильной границы, это не работает.

Я установил скрипку прямо здесь: https://jsfiddle.net/Lk6bf5mm/3/ Проблема в том, что если она выглядит хорошо в скрипке, это не значит, что она будет выглядеть так же в Outlook.

Спасибо за любую помощь.

ответ

1

Одна из проблем, которые могут вызывать проблемы, заключается в том, что Outlook отделяет ваш раздел от вашей электронной почты. Обязательно добавьте все CSS внутри строки в элементы. Попробуйте установить границу 0, а затем использовать встроенный CSS, чтобы стиль границы на отдельных элементах:

<table border="1"> 

Перспективы 2013 использует слово для отображения HTML, который имеет различные правила. Вы можете прочитать больше о том, что HTML и CSS разрешено здесь:

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)

Смежные вопросы