来自 Sharepoint 的 HTML 电子邮件看起来与网站上的不同

问题如下:我确实想在特定工作流程任务后发送 (HTML) 电子邮件。为此，我创建了一个变量，在其中发布了我的 HTML 并将该变量附加到邮件中，效果很好。但在我收到电子邮件后，它看起来与我计划的略有不同。

我为此创建了两个 JSFiddles:第一个显示我想要的外观，第二个显示接收到的外观。

我希望它看起来如何:https://jsfiddle.net/zoxkn3ku/
外观:https://jsfiddle.net/zoxkn3ku/1/

“Vom:”列比第一列稍高，“Bis:”列更差。需要注意的一件事是，“Vom:”列只有错误的标题单元格。所有其他单元格都正确对齐。但是，“Bis:”列是完全错误的。

我的工作流程中已经有一个类似的电子邮件(也将 HTML 代码保存在一个变量中)，所以我认为这不是问题所在。我也试过 max-width/max-height，但没有用。

提前致谢!

HTML:

<BODY>
  <br />
  <br />
  <p>Sehr geehrte/r Frau/Herr VERTRETER,</p>
  <p>in der unteren Tabelle finden Sie meine Urlaubstage und muss an diesen Tagen, wie abgesprochen,&nbsp; durch Sie vertreten werden.</p>
  <table>
    <tr>
      <th>Genehmigte Urlaubstage</th>
      <th class="dates">Von:</th>
      <th class="dates">Bis:</th>
    </tr>
    <tr>
      <td>Urlaubstage 1</td>
      <td>01.02.2017</td>
      <td>05.02.2017</td>
    </tr>
    <tr>
      <td>Urlaubstage 2</td>
      <td>01.02.2017</td>
      <td>05.02.2017</td>
    </tr>
    <tr>
      <td>Urlaubstage 3</td>
      <td>01.02.2017</td>
      <td>05.02.2017</td>
    </tr>
    <tr>
      <td>Urlaubstage 4</td>
      <td>01.02.2017</td>
      <td>05.02.2017</td>
    </tr>
    <tr>
      <td>Urlaubstage 5</td>
      <td>01.02.2017</td>
      <td>05.02.2017</td>
    </tr>
  </table>
  <p>Mit freundlichen Grüßen,</p>
  <p>ANTRAGSSTELLER</p>

CSS:

<style>body {
  font-family: "Calibri", Arial, sans-serif;
  font-size: 14;
}

#pic {
  margin-left: 490px
}

table {
  margin-left: 10px;
  border-collapse: collapse;
  width: 500px;
  table-layout: fixed;
}

th {
  color: #009EE3;
  font-variant: small-caps;
  font-size: 20;
  text-align: left;
  padding: 10px
}

td {
  border: 2px solid #6E6E6E;
  padding: 15px
}

.dates {
  text-align: center;
  width: 120px;
  height: 70px
}

</style>

这是我粘贴到工作流变量的代码(带有用于 HTML 电子邮件的内联样式标签):

<HTML>
   <HEAD>
      <style>body {font-family: "Calibri", Arial, sans-serif; font-size: 14;} #pic {margin-left: 490px} table { margin-left: 10px; border-collapse: collapse; width: 500px; table-layout: fixed;} th {color: #009EE3; font-variant: small-caps; font-size:20; text-align: left; padding:10px} td {border: 2px solid #6E6E6E; padding: 15px} .dates{text-align: center; width: 120px; height: 70px}</style>
      <TITLE></TITLE>
   </HEAD>
   <BODY>
       <p>Sehr geehrte/r Frau/Herr VERTRETER,</p>
       <p>in der unteren Tabelle finden Sie meine Urlaubstage und muss an diesen Tagen, wie abgesprochen,&nbsp; durch Sie vertreten werden.</p>
      <table>
         <tr>
            <th>Genehmigte Urlaubstage</th>
            <th class="dates">Von:</th>
            <th class="dates">Bis:</th>
         </tr>
         <tr>
            <td>Urlaubstage 1</td>
            <td>01.02.2017</td>
            <td>05.02.2017</td>
         </tr>
         <tr>
            <td>Urlaubstage 2</td>
            <td>01.02.2017</td>
            <td>05.02.2017</td>
         </tr>
         <tr>
            <td>Urlaubstage 3</td>
            <td>01.02.2017</td>
            <td>05.02.2017</td>
         </tr>
         <tr>
            <td>Urlaubstage 4</td>
            <td>01.02.2017</td>
            <td>05.02.2017</td>
         </tr>
         <tr>
            <td>Urlaubstage 5</td>
            <td>01.02.2017</td>
            <td>05.02.2017</td>
         </tr>
      </table>
       <p>Mit freundlichen Grüßen,</p>
       <p>ANTRAGSSTELLER</p>
   </body>
</html>

最佳答案

您已经为类 dates2 和 dates3 提供了 70px padding-bottom 这是更新后的 fiddle

body {
  font-family: "Calibri", Arial, sans-serif;
  font-size: 14;
}

#pic {
  margin-left: 490px
}

table {
  margin-left: 10px;
  border-collapse: collapse;
  width: 500px;
  table-layout: fixed;
}

th {
  color: #009EE3;
  font-variant: small-caps;
  font-size: 20;
  text-align: left;
  padding: 10px
}

td {
  border: 2px solid #6E6E6E;
  padding: 15px
}

.dates1 {
  text-align: center;
  padding-bottom: 25px;
  width: 120px;
  height: 70px
}

.dates2 {
  text-align: center;
  padding-bottom: 25px;
  width: 120px;
  height: 70px
}

.dates3 {
  padding-bottom: 25px;
  width: 120px;
  height: 70px
}
}

关于来自 Sharepoint 的 HTML 电子邮件看起来与网站上的不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44305924/

来自 Sharepoint 的 HTML 电子邮件看起来与网站上的不同

上一篇：javascript - 使用 javascript 根据内容放置位置为元素应用 Css

下一篇：CSS 动画 : How do I apply transform after every iteration?