如何使用HTML将边框应用于电子邮件模板

问题描述 投票：0回答：1

我设计了一个电子邮件模板，其中包含横幅图像和表格行等。所有内容都完美对齐。但是我想将所有内容都设置在一个边框中。

下面是我的代码段，并输出我收到的内容，任何人都可以帮助我如何实现。

<p><img src="medical.jpg" width="100%" height="144" /></p>
<p>&nbsp;</p>
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">Hello</span></span>
  </span>
</p>
<table style="width: 100%;">
  <tbody>
    <tr>
      <td style="height: 40px;" colspan="5">
        <p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">You Project(${URI_REF}) has been submitted and is being reviewed by&nbsp;<strong>${u_project_manager}</strong>.</span></span>
        </p>
        <p>&nbsp;</p>
      </td>
    </tr>
    <tr>
      <td style="background-color: #e6e7e8; color: #396b53;" colspan="5"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Title</strong></span></span>
      </td>
    </tr>
    <tr>
      <td style="color: black;" colspan="5"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${short_description}</span></span>
      </td>
    </tr>
    <tr>
      <td style="background-color: #e6e7e8; color: #396b53;" colspan="3"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Submitted by</strong></span></span>
      </td>
      <td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Approver</strong></span></span>
      </td>
      <td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Department</strong></span></span>
      </td>
    </tr>
    <tr>
      <td style="color: black;" colspan="3"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${submitter}</span></span>
      </td>
      <td style="color: black;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${u_project_manager}</span></span>
      </td>
      <td style="color: black;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${department}</span></span>
      </td>
    </tr>
  </tbody>
</table>
<hr />
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;">Thank you,<br /></span><span style="font-family: 'Montserrat', sans-serif;">IT Service Desk</span></span>
</p>
<p>&nbsp;</p>
html css
1个回答
0
投票

这里是代码。希望对您有所帮助。如有任何更改，请告诉我。

https://jsfiddle.net/rfx2jkc1/

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <style type="text/css">
      .main-table {
        width: 640px;
        margin: 0 auto;
      }

      .logo-table {
        width: 100%;
        padding-bottom: 10px;
      }

      .content-table {
        width: 100%;
      }

      .content-area {
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 20px;
      }

      .content {
        background-color: #fff;
        padding: 20px;
        font-family: "Segoe UI", Arial;
        font-size: 0.9em;
        color: #111111;
      }

      .content table {
        font-family: "Segoe UI", Arial;
        font-size: 0.9em;
        color: #111111;
        border: 0
      }

      .receiverName {
        font-family: "Segoe UI", Arial;
        font-size: 1.1em;
        color: #006699;
        font-weight: lighter;
      }

      .senderName {
        display: block;
      }

      .customer-password {
        display: none;
      }

      .template-table {
        border-collapse: collapse;
      }

      .template-table td {
        border-top: 1px solid #ccc;
        padding: 10px
      }

      .template-table td:last-child {
        border-bottom: 1px solid #ccc;
      }

      .border-bottom {
        border-bottom: 1px solid #ccc
      }

      .padding0 {
        padding: 0;
      }

    </style>
  </head>

  <body>
    <table class="main-table" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td class="content-area">
          <table class="logo-table" border="0" cellspacing="0" cellpadding="10">
            <tr>
              <td bgcolor="#0693ce" align="center">
                <img src="#" width="200" />
              </td>
            </tr>
          </table>
          <table class="content-table" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td class="content">
                <div>Hello [CustomerName],</div>
                <br />
                <p align="center"><strong>
                    <font color="#000000" size="3" face="Segoe UI, Arial">Congratulations! You have created user with below credentials on
                      <a href="[PortalUrlForEmail]" target="_blank">[CSPProviderName] CSP Portal.</a></font>
                  </strong>
                </p>
                <br />
                <table width="100%" cellpadding="5" cellspacing="1" bgcolor="#cccccc" class="template-table">
                  <tr bgcolor="#fff">
                    <td align="left" width="30%">
                      <strong>
                        <font color="#000000" size="2" face="Segoe UI, Arial">UserName</font>
                      </strong>
                    </td>
                    <td align="right" width="70%">
                      <font color="#000000" size="2" face="Segoe UI, Arial">[EmailID]</font>
                    </td>
                  </tr>
                  
                  <tr bgcolor="#fff">
                    <td align="left" width="30%">
                      <strong>
                        <font color="#000000" size="2" face="Segoe UI, Arial">Password</font>
                      </strong>
                    </td>
                    <td align="right" width="70%">
                      <font color="#000000" size="2" face="Segoe UI, Arial">[Password]</font>
                    </td>
                  </tr>
                  
          </table>
          <br />
          <br />
          <br />
          <span>Thank You,</span>
          <br />
          <span class="senderName">[CSPProviderName] CSP.</span>
        </td>
      </tr>
    </table>
    
    </td>
    </tr>
    </table>
  </body>

</html>
-1
投票

喜欢吗？ 

<div style="border:1px solid black; padding:1em">
<p><img src="medical.jpg" width="100%" height="144" /></p>
<p>&nbsp;</p>
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">Hello</span></span>
  </span>
</p>
<table style="width: 100%;">
  <tbody>
    <tr>
      <td style="height: 40px;" colspan="5">
        <p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">You Project(${URI_REF}) has been submitted and is being reviewed by&nbsp;<strong>${u_project_manager}</strong>.</span></span>
        </p>
        <p>&nbsp;</p>
      </td>
    </tr>
    <tr>
      <td style="background-color: #e6e7e8; color: #396b53;" colspan="5"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Title</strong></span></span>
      </td>
    </tr>
    <tr>
      <td style="color: black;" colspan="5"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${short_description}</span></span>
      </td>
    </tr>
    <tr>
      <td style="background-color: #e6e7e8; color: #396b53;" colspan="3"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Submitted by</strong></span></span>
      </td>
      <td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Approver</strong></span></span>
      </td>
      <td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Department</strong></span></span>
      </td>
    </tr>
    <tr>
      <td style="color: black;" colspan="3"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${submitter}</span></span>
      </td>
      <td style="color: black;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${u_project_manager}</span></span>
      </td>
      <td style="color: black;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${department}</span></span>
      </td>
    </tr>
  </tbody>
</table>
<hr />
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;">Thank you,<br /></span><span style="font-family: 'Montserrat', sans-serif;">IT Service Desk</span></span>
</p>
<p>&nbsp;</p></div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.