Question

问题如下：我确实希望在特定的工作流任务后发送（HTML）电子邮件。为此，我创建了一个变量，在我的内部发布了我的HTML并将此变量附加到邮件中，这很好。但收到电子邮件后，它看起来与我的计划略有不同。

我为此创建了两个JSFiddles：第一个显示我希望它的外观，第二个显示接收的外观。

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

“Vom：”列的第一列略高，“Bis：”列更差。需要注意的一点是，“Vom：”列只有错误的标题单元格。所有其他单元格都正确对齐。然而，“Bis：”栏是完全错误的。

我有一个类似的电子邮件已经在我的工作流程中工作（也将HTML-Code保存在变量中），所以我不认为这是问题所在。我也试过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>

Answer 1

你为课程date2和date3提供了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电子邮件与网站

1 个答案: