html - 如何使用 HTML 将边框应用于电子邮件模板
问题描述
我设计了一个电子邮件模板,其中包含横幅图像和表格行等。一切都完美对齐。但我想将所有内容都设置在一个边框中。
以下是我的代码片段并输出我收到的内容,任何人都可以帮助我如何实现。
<p><img src="medical.jpg" width="100%" height="144" /></p>
<p> </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 <strong>${u_project_manager}</strong>.</span></span>
</p>
<p> </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> </p>
解决方案
这是代码。希望对您有所帮助。如果有任何更改,请告诉我。
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> </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">[ABCProviderName] 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">[ABCProviderName] CSP.</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
推荐阅读
- javascript - 如何在单个解决方案中运行多个 Karma 和 Jasmine 项目(需要 Jenkins 集成)?
- r - 当逻辑回归不能完全捕获数据时会发生什么?
- google-calendar-api - Google Calendar API 使用受限问题
- swift - 从 CATransform3D 获取缩放、平移和旋转
- lua - 在嵌套情况下如何最好地找到特定值的键?
- php - Laravel 购票支付方式
- html - 无法在 @font-face 中加载 base64 编码字体
- python - readthedocs autobuild 需要 Fortran 编译器:改为上传本地构建的文件?
- arrays - 如果嵌入文档数组中的每个文档都符合条件,则获取文档
- sql-server - 在使用 order by to order building floor 解决 sql 问题时需要帮助