html - 表格中的电子邮件模板较小的表格
问题描述
我正在创建一个电子邮件模板，但我不知道如何在主表中创建一个较小的表：
下面的代码片段有人可以帮我创建这个吗？
/* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
#outlook a {
padding: 0;
}
/* Force Outlook to provide a "view in browser" message */
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
/* Force Hotmail to display emails at full width */
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
/* Force Hotmail to display normal line spacing */
body,
table,
td,
p,
a,
li,
blockquote {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* Prevent WebKit and Windows mobile changing default text sizes */
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/* Remove spacing between tables in Outlook 2007 and up */
img {
-ms-interpolation-mode: bicubic;
}
/* Allow smoother rendering of resized image in Internet Explorer */
/* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
body {
margin: 0;
padding: 0;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
table {
border-collapse: collapse !important;
}
body,
#bodyTable,
#bodyCell {
height: 100% !important;
margin: 0;
padding: 0;
width: 100% !important;
}
/* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */
#bodyCell {
padding: 20px;
}
#templateContainer {
width: 600px;
}
/* ========== Page Styles ========== */
/**
* @tab Page
* @section background style
* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
* @theme page
*/
body,
#bodyTable {
/*@editable*/
background-color: #DEE0E2;
}
/**
* @tab Page
* @section background style
* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
* @theme page
*/
#bodyCell {
/*@editable*/
border-top: 4px solid #BBBBBB;
}
/**
* @tab Page
* @section heading 1
* @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
* @style heading 1
*/
h1 {
/*@editable*/
color: #202020 !important;
display: block;
/*@editable*/
font-family: Helvetica;
/*@editable*/
font-size: 26px;
/*@editable*/
font-style: normal;
/*@editable*/
font-weight: bold;
/*@editable*/
line-height: 100%;
/*@editable*/
letter-spacing: normal;
margin-top: 0;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
/*@editable*/
text-align: left;
}
/**
* @tab Page
* @section heading 2
* @tip Set the styling for all second-level headings in your emails.
* @style heading 2
*/
h2 {
/*@editable*/
color: #404040 !important;
display: block;
/*@editable*/
font-family: Helvetica;
/*@editable*/
font-size: 20px;
/*@editable*/
font-style: normal;
/*@editable*/
font-weight: bold;
/*@editable*/
line-height: 100%;
/*@editable*/
letter-spacing: normal;
margin-top: 0;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
/*@editable*/
text-align: left;
}
/**
* @tab Page
* @section heading 3
* @tip Set the styling for all third-level headings in your emails.
* @style heading 3
*/
h3 {
/*@editable*/
color: #606060 !important;
display: block;
/*@editable*/
font-family: Helvetica;
/*@editable*/
font-size: 16px;
/*@editable*/
font-style: italic;
/*@editable*/
font-weight: normal;
/*@editable*/
line-height: 100%;
/*@editable*/
letter-spacing: normal;
margin-top: 0;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
/*@editable*/
text-align: left;
}
/**
* @tab Page
* @section heading 4
* @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
* @style heading 4
*/
h4 {
/*@editable*/
color: #808080 !important;
display: block;
/*@editable*/
font-family: Helvetica;
/*@editable*/
font-size: 14px;
/*@editable*/
font-style: italic;
/*@editable*/
font-weight: normal;
/*@editable*/
line-height: 100%;
/*@editable*/
letter-spacing: normal;
margin-top: 0;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
/*@editable*/
text-align: left;
}
/* ========== Header Styles ========== */
/**
* @tab Header
* @section preheader style
* @tip Set the background color and bottom border for your email's preheader area.
* @theme header
*/
#templatePreheader {
/*@editable*/
background-color: #F4F4F4;
/*@editable*/
border-bottom: 1px solid #CCCCCC;
}
/**
* @tab Header
* @section preheader text
* @tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
*/
.preheaderContent {
/*@editable*/
color: #808080;
/*@editable*/
font-family: Helvetica;
/*@editable*/
font-size: 10px;
/*@editable*/
line-height: 125%;
/*@editable*/
text-align: left;
}
/**
* @tab Header
* @section preheader link
* @tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
*/
.preheaderContent a:link,
.preheaderContent a:visited,
/* Yahoo! Mail Override */
.preheaderContent a .yshortcuts
/* Yahoo! Mail Override */
{
/*@editable*/
color: #606060;
/*@editable*/
font-weight: normal;
/*@editable*/
text-decoration: underline;
}
/**
* @tab Header
* @section header style
* @tip Set the background color and borders for your email's header area.
* @theme header
*/
#templateHeader {
/*@editable*/
background-color: #F4F4F4;
/*@editable*/
border-top: 1px solid #FFFFFF;
/*@editable*/
border-bottom: 1px solid #CCCCCC;
}
/**
* @tab Header
* @section header text
* @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
*/
.headerContent {
/*@editable*/
color: #505050;
/*@editable*/
font-family: Helvetica;
/*@editable*/
font-size: 20px;
/*@editable*/
font-weight: bold;
/*@editable*/
line-height: 100%;
/*@editable*/
padding-top: 0;
/*@editable*/
padding-right: 0;
/*@editable*/
padding-bottom: 0;
/*@editable*/
padding-left: 0;
/*@editable*/
text-align: left;
/*@editable*/
vertical-align: middle;
}
/**
* @tab Header
* @section header link
* @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
*/
.headerContent a:link,
.headerContent a:visited,
/* Yahoo! Mail Override */
.headerContent a .yshortcuts
/* Yahoo! Mail Override */
{
/*@editable*/
color: #EB4102;
/*@editable*/
font-weight: normal;
/*@editable*/
text-decoration: underline;
}
#headerImage {
height: auto;
max-width: 600px;
}
/* ========== Body Styles ========== */
/**
* @tab Body
* @section body style
* @tip Set the background color and borders for your email's body area.
*/
#templateBody {
/*@editable*/
background-color: #ffffff;
/*@editable*/
border-top: 1px solid #FFFFFF;
/*@editable*/
border-bottom: 1px solid #CCCCCC;
}
/**
* @tab Body
* @section body text
* @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
* @theme main
*/
.bodyContent {
/*@editable*/
color: #505050;
/*@editable*/
font-family: Helvetica;
/*@editable*/
font-size: 14px;
/*@editable*/
line-height: 150%;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
/*@editable*/
text-align: left;
}
/**
* @tab Body
* @section body link
* @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
*/
.bodyContent a:link,
.bodyContent a:visited,
/* Yahoo! Mail Override */
.bodyContent a .yshortcuts
/* Yahoo! Mail Override */
{
/*@editable*/
color: #000;
/*@editable*/
font-weight: normal;
/*@editable*/
text-decoration: underline;
}
.bodyContent img {
display: inline;
height: auto;
max-width: 560px;
}
/* ========== Footer Styles ========== */
/**
* @tab Footer
* @section footer style
* @tip Set the background color and borders for your email's footer area.
* @theme footer
*/
#templateFooter {
/*@editable*/
background-color: #F4F4F4;
/*@editable*/
border-top: 1px solid #FFFFFF;
}
/**
* @tab Footer
* @section footer text
* @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
* @theme footer
*/
.footerContent {
/*@editable*/
color: #808080;
/*@editable*/
font-family: Helvetica;
/*@editable*/
font-size: 10px;
/*@editable*/
line-height: 150%;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
/*@editable*/
text-align: left;
}
/**
* @tab Footer
* @section footer link
* @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
*/
.footerContent a:link,
.footerContent a:visited,
/* Yahoo! Mail Override */
.footerContent a .yshortcuts,
.footerContent a span
/* Yahoo! Mail Override */
{
/*@editable*/
color: #606060;
/*@editable*/
font-weight: normal;
/*@editable*/
text-decoration: underline;
}
/* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */
@media only screen and (max-width: 480px) {
/* /\/\/\/\/\/\/ CLIENT-SPECIFIC MOBILE STYLES /\/\/\/\/\/\/ */
body,
table,
td,
p,
a,
li,
blockquote {
-webkit-text-size-adjust: none !important;
}
/* Prevent Webkit platforms from changing default text sizes */
body {
width: 100% !important;
min-width: 100% !important;
}
/* Prevent iOS Mail from adding padding to the body */
/* /\/\/\/\/\/\/ MOBILE RESET STYLES /\/\/\/\/\/\/ */
#bodyCell {
padding: 10px !important;
}
/* /\/\/\/\/\/\/ MOBILE TEMPLATE STYLES /\/\/\/\/\/\/ */
/* ======== Page Styles ======== */
/**
* @tab Mobile Styles
* @section template width
* @tip Make the template fluid for portrait or landscape view adaptability. If a fluid layout doesn't work for you, set the width to 300px instead.
*/
#templateContainer {
max-width: 600px !important;
/*@editable*/
width: 100% !important;
}
/**
* @tab Mobile Styles
* @section heading 1
* @tip Make the first-level headings larger in size for better readability on small screens.
*/
h1 {
/*@editable*/
font-size: 24px !important;
/*@editable*/
line-height: 100% !important;
}
/**
* @tab Mobile Styles
* @section heading 2
* @tip Make the second-level headings larger in size for better readability on small screens.
*/
h2 {
/*@editable*/
font-size: 20px !important;
/*@editable*/
line-height: 100% !important;
}
/**
* @tab Mobile Styles
* @section heading 3
* @tip Make the third-level headings larger in size for better readability on small screens.
*/
h3 {
/*@editable*/
font-size: 18px !important;
/*@editable*/
line-height: 100% !important;
}
/**
* @tab Mobile Styles
* @section heading 4
* @tip Make the fourth-level headings larger in size for better readability on small screens.
*/
h4 {
/*@editable*/
font-size: 16px !important;
/*@editable*/
line-height: 100% !important;
}
/* ======== Header Styles ======== */
#templatePreheader {
display: none !important;
}
/* Hide the template preheader to save space */
/**
* @tab Mobile Styles
* @section header image
* @tip Make the main header image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.
*/
#headerImage {
height: auto !important;
/*@editable*/
max-width: 600px !important;
/*@editable*/
width: 100% !important;
}
/**
* @tab Mobile Styles
* @section header text
* @tip Make the header content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
.headerContent {
/*@editable*/
font-size: 20px !important;
/*@editable*/
line-height: 125% !important;
}
/* ======== Body Styles ======== */
/**
* @tab Mobile Styles
* @section body image
* @tip Make the main body image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.
*/
#bodyImage {
height: auto !important;
/*@editable*/
max-width: 560px !important;
/*@editable*/
width: 100% !important;
}
/**
* @tab Mobile Styles
* @section body text
* @tip Make the body content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
.bodyContent {
/*@editable*/
font-size: 18px !important;
/*@editable*/
line-height: 125% !important;
}
/* ======== Footer Styles ======== */
/**
* @tab Mobile Styles
* @section footer text
* @tip Make the body content text larger in size for better readability on small screens.
*/
.footerContent {
/*@editable*/
font-size: 14px !important;
/*@editable*/
line-height: 115% !important;
}
.footerContent a {
display: block !important;
}
/* Place footer social and utility links on their own lines, for easier access */
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
body {
font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
}<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top" id="bodyCell">
<!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
<tr>
<td align="center" valign="top">
<!-- BEGIN BODY // -->
<table border="0" cellpadding="0" width="600" id="templateBody">
<tr bgcolor="#ffffff">
<td colspan="3" height="15"></td>
</tr>
<tr>
<th class="mail-title" style="font-size: 20px;">A report run was generated for Test client name!</th>
</tr>
<tr bgcolor="#ffffff">
<td colspan="3" height="10"></td>
</tr>
<tr align='center'>
<td>Client name: Test client name</td>
</tr>
<tr bgcolor="#ffffff">
<td colspan="3" height="5"></td>
</tr>
<tr align='center'>
<td>Report name: Test report name</td>
</tr>
<tr bgcolor="#ffffff">
<td colspan="3" height="5"></td>
</tr>
<tr align='center'>
<td> Executable: yes</td>
</tr>
<tr bgcolor="#ffffff">
<td colspan="3" height="20"></td>
</tr>
<tr>
<td align="center" valign="top">
<table width="140" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="35" align="center" valign="middle" style="background:#FFD668;-moz-border-radius: 4px;border-radius: 4px; font-size:14px; font-weight:normal; color:#FFF; text-transform:uppercase;"
mc:edit="t1-43">
<multiline>
<a href="http://tool.fingerspitz.nl.ebox/" style="text-decoration:none; color:#000;"><b>View</b></a>
</multiline>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr bgcolor="#ffffff">
<td colspan="3" height="20"></td>
</tr>
</table>
<!-- // END BODY -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- BEGIN FOOTER // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateFooter">
<tr>
<td valign="top" style="background-color:#ffd668;" class="footerContent" mc:edit="footer_content00">
<a style="border: 0;" href="http://www.fingerspitz.nl">
<img src=" width="182" height="30">
</a>
</td>
</tr>
</table>
<!-- // END FOOTER -->
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
它必须看起来像这样父表内的灰色表
解决方案
请参阅下面的代码。
/* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
#outlook a {
padding: 0;
}
/* Force Outlook to provide a "view in browser" message */
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
/* Force Hotmail to display emails at full width */
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
/* Force Hotmail to display normal line spacing */
body,
table,
td,
p,
a,
li,
blockquote {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* Prevent WebKit and Windows mobile changing default text sizes */
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/* Remove spacing between tables in Outlook 2007 and up */
img {
-ms-interpolation-mode: bicubic;
}
/* Allow smoother rendering of resized image in Internet Explorer */
/* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
body {
margin: 0;
padding: 0;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
table {
border-collapse: collapse !important;
}
body,
#bodyTable,
#bodyCell {
height: 100% !important;
margin: 0;
padding: 0;
width: 100% !important;
}
/* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */
#bodyCell {
padding: 20px;
}
#templateContainer {
width: 600px;
}
/* ========== Page Styles ========== */
/**
* @tab Page
* @section background style
* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
* @theme page
*/
body,
#bodyTable {
/*@editable*/
background-color: #DEE0E2;
}
/**
* @tab Page
* @section background style
* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
* @theme page
*/
#bodyCell {
/*@editable*/
border-top: 4px solid #BBBBBB;
}
/**
* @tab Page
* @section heading 1
* @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
* @style heading 1
*/
h1 {
/*@editable*/
color: #202020 !important;
display: block;
/*@editable*/
font-family: Helvetica;
/*@editable*/
font-size: 26px;
/*@editable*/
font-style: normal;
/*@editable*/
font-weight: bold;
/*@editable*/
line-height: 100%;
/*@editable*/
letter-spacing: normal;
margin-top: 0;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
/*@editable*/
text-align: left;
}
/**
* @tab Page
* @section heading 2
* @tip Set the styling for all second-level headings in your emails.
* @style heading 2
*/
h2 {
/*@editable*/
color: #404040 !important;
display: block;
/*@editable*/
font-family: Helvetica;
/*@editable*/
font-size: 20px;
/*@editable*/
font-style: normal;
/*@editable*/
font-weight: bold;
/*@editable*/
line-height: 100%;
/*@editable*/
letter-spacing: normal;
margin-top: 0;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
/*@editable*/
text-align: left;
}
/**
* @tab Page
* @section heading 3
* @tip Set the styling for all third-level headings in your emails.
* @style heading 3
*/
h3 {
/*@editable*/
color: #606060 !important;
display: block;
/*@editable*/
font-family: Helvetica;
/*@editable*/
font-size: 16px;
/*@editable*/
font-style: italic;
/*@editable*/
font-weight: normal;
/*@editable*/
line-height: 100%;
/*@editable*/
letter-spacing: normal;
margin-top: 0;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
/*@editable*/
text-align: left;
}
/**
* @tab Page
* @section heading 4
* @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
* @style heading 4
*/
h4 {
/*@editable*/
color: #808080 !important;
display: block;
/*@editable*/
font-family: Helvetica;
/*@editable*/
font-size: 14px;
/*@editable*/
font-style: italic;
/*@editable*/
font-weight: normal;
/*@editable*/
line-height: 100%;
/*@editable*/
letter-spacing: normal;
margin-top: 0;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
/*@editable*/
text-align: left;
}
/* ========== Header Styles ========== */
/**
* @tab Header
* @section preheader style
* @tip Set the background color and bottom border for your email's preheader area.
* @theme header
*/
#templatePreheader {
/*@editable*/
background-color: #F4F4F4;
/*@editable*/
border-bottom: 1px solid #CCCCCC;
}
/**
* @tab Header
* @section preheader text
* @tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
*/
.preheaderContent {
/*@editable*/
color: #808080;
/*@editable*/
font-family: Helvetica;
/*@editable*/
font-size: 10px;
/*@editable*/
line-height: 125%;
/*@editable*/
text-align: left;
}
/**
* @tab Header
* @section preheader link
* @tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
*/
.preheaderContent a:link,
.preheaderContent a:visited,
/* Yahoo! Mail Override */
.preheaderContent a .yshortcuts
/* Yahoo! Mail Override */
{
/*@editable*/
color: #606060;
/*@editable*/
font-weight: normal;
/*@editable*/
text-decoration: underline;
}
/**
* @tab Header
* @section header style
* @tip Set the background color and borders for your email's header area.
* @theme header
*/
#templateHeader {
/*@editable*/
background-color: #F4F4F4;
/*@editable*/
border-top: 1px solid #FFFFFF;
/*@editable*/
border-bottom: 1px solid #CCCCCC;
}
/**
* @tab Header
* @section header text
* @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
*/
.headerContent {
/*@editable*/
color: #505050;
/*@editable*/
font-family: Helvetica;
/*@editable*/
font-size: 20px;
/*@editable*/
font-weight: bold;
/*@editable*/
line-height: 100%;
/*@editable*/
padding-top: 0;
/*@editable*/
padding-right: 0;
/*@editable*/
padding-bottom: 0;
/*@editable*/
padding-left: 0;
/*@editable*/
text-align: left;
/*@editable*/
vertical-align: middle;
}
/**
* @tab Header
* @section header link
* @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
*/
.headerContent a:link,
.headerContent a:visited,
/* Yahoo! Mail Override */
.headerContent a .yshortcuts
/* Yahoo! Mail Override */
{
/*@editable*/
color: #EB4102;
/*@editable*/
font-weight: normal;
/*@editable*/
text-decoration: underline;
}
#headerImage {
height: auto;
max-width: 600px;
}
/* ========== Body Styles ========== */
/**
* @tab Body
* @section body style
* @tip Set the background color and borders for your email's body area.
*/
#templateBody {
/*@editable*/
background-color: #ffffff;
/*@editable*/
border-top: 1px solid #FFFFFF;
/*@editable*/
border-bottom: 1px solid #CCCCCC;
}
/**
* @tab Body
* @section body text
* @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
* @theme main
*/
.bodyContent {
/*@editable*/
color: #505050;
/*@editable*/
font-family: Helvetica;
/*@editable*/
font-size: 14px;
/*@editable*/
line-height: 150%;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
/*@editable*/
text-align: left;
}
/**
* @tab Body
* @section body link
* @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
*/
.bodyContent a:link,
.bodyContent a:visited,
/* Yahoo! Mail Override */
.bodyContent a .yshortcuts
/* Yahoo! Mail Override */
{
/*@editable*/
color: #000;
/*@editable*/
font-weight: normal;
/*@editable*/
text-decoration: underline;
}
.bodyContent img {
display: inline;
height: auto;
max-width: 560px;
}
/* ========== Footer Styles ========== */
/**
* @tab Footer
* @section footer style
* @tip Set the background color and borders for your email's footer area.
* @theme footer
*/
#templateFooter {
/*@editable*/
background-color: #F4F4F4;
/*@editable*/
border-top: 1px solid #FFFFFF;
}
/**
* @tab Footer
* @section footer text
* @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
* @theme footer
*/
.footerContent {
/*@editable*/
color: #808080;
/*@editable*/
font-family: Helvetica;
/*@editable*/
font-size: 10px;
/*@editable*/
line-height: 150%;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
/*@editable*/
text-align: left;
}
/**
* @tab Footer
* @section footer link
* @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
*/
.footerContent a:link,
.footerContent a:visited,
/* Yahoo! Mail Override */
.footerContent a .yshortcuts,
.footerContent a span
/* Yahoo! Mail Override */
{
/*@editable*/
color: #606060;
/*@editable*/
font-weight: normal;
/*@editable*/
text-decoration: underline;
}
/* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */
@media only screen and (max-width: 480px) {
/* /\/\/\/\/\/\/ CLIENT-SPECIFIC MOBILE STYLES /\/\/\/\/\/\/ */
body,
table,
td,
p,
a,
li,
blockquote {
-webkit-text-size-adjust: none !important;
}
/* Prevent Webkit platforms from changing default text sizes */
body {
width: 100% !important;
min-width: 100% !important;
}
/* Prevent iOS Mail from adding padding to the body */
/* /\/\/\/\/\/\/ MOBILE RESET STYLES /\/\/\/\/\/\/ */
#bodyCell {
padding: 10px !important;
}
/* /\/\/\/\/\/\/ MOBILE TEMPLATE STYLES /\/\/\/\/\/\/ */
/* ======== Page Styles ======== */
/**
* @tab Mobile Styles
* @section template width
* @tip Make the template fluid for portrait or landscape view adaptability. If a fluid layout doesn't work for you, set the width to 300px instead.
*/
#templateContainer {
max-width: 600px !important;
/*@editable*/
width: 100% !important;
}
/**
* @tab Mobile Styles
* @section heading 1
* @tip Make the first-level headings larger in size for better readability on small screens.
*/
h1 {
/*@editable*/
font-size: 24px !important;
/*@editable*/
line-height: 100% !important;
}
/**
* @tab Mobile Styles
* @section heading 2
* @tip Make the second-level headings larger in size for better readability on small screens.
*/
h2 {
/*@editable*/
font-size: 20px !important;
/*@editable*/
line-height: 100% !important;
}
/**
* @tab Mobile Styles
* @section heading 3
* @tip Make the third-level headings larger in size for better readability on small screens.
*/
h3 {
/*@editable*/
font-size: 18px !important;
/*@editable*/
line-height: 100% !important;
}
/**
* @tab Mobile Styles
* @section heading 4
* @tip Make the fourth-level headings larger in size for better readability on small screens.
*/
h4 {
/*@editable*/
font-size: 16px !important;
/*@editable*/
line-height: 100% !important;
}
/* ======== Header Styles ======== */
#templatePreheader {
display: none !important;
}
/* Hide the template preheader to save space */
/**
* @tab Mobile Styles
* @section header image
* @tip Make the main header image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.
*/
#headerImage {
height: auto !important;
/*@editable*/
max-width: 600px !important;
/*@editable*/
width: 100% !important;
}
/**
* @tab Mobile Styles
* @section header text
* @tip Make the header content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
.headerContent {
/*@editable*/
font-size: 20px !important;
/*@editable*/
line-height: 125% !important;
}
/* ======== Body Styles ======== */
/**
* @tab Mobile Styles
* @section body image
* @tip Make the main body image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.
*/
#bodyImage {
height: auto !important;
/*@editable*/
max-width: 560px !important;
/*@editable*/
width: 100% !important;
}
/**
* @tab Mobile Styles
* @section body text
* @tip Make the body content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/
.bodyContent {
/*@editable*/
font-size: 18px !important;
/*@editable*/
line-height: 125% !important;
}
/* ======== Footer Styles ======== */
/**
* @tab Mobile Styles
* @section footer text
* @tip Make the body content text larger in size for better readability on small screens.
*/
.footerContent {
/*@editable*/
font-size: 14px !important;
/*@editable*/
line-height: 115% !important;
}
.footerContent a {
display: block !important;
}
/* Place footer social and utility links on their own lines, for easier access */
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
body {
font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
}<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top" id="bodyCell">
<!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
<tr>
<td align="center" valign="top">
<!-- BEGIN BODY // -->
<table border="0" cellpadding="0" width="600" id="templateBody">
<tr bgcolor="#ffffff">
<td colspan="3" height="15"></td>
</tr>
<tr>
<th class="mail-title" style="font-size: 20px;">A report run was generated for Test client name!</th>
</tr>
<tr bgcolor="#ffffff">
<td colspan="3" height="10"></td>
</tr>
<tr bgcolor="#ffffff">
<td>
<table border="0" cellpadding="0" width="600" id="templateContainer">
<tr>
<td width="100" height="10"></td>
<td height="10" bgcolor="#f4f4f4" style="border-radius:10px">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" height="20"></td>
</tr>
<tr align='center'>
<td width="200"><b>Client name:</b><br> Test client name</td>
<td width="200"><b>Client name:</b><br> Test client name</td>
</tr>
<tr>
<td colspan="3" height="10"></td>
</tr>
<tr align='center'>
<td colspan="2">
<table width="140" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="35" align="center" valign="middle" style="background:#FFD668;-moz-border-radius: 4px;border-radius: 4px; font-size:14px; font-weight:normal; color:#FFF; text-transform:uppercase;"
mc:edit="t1-43">
<multiline>
<a href="http://tool.fingerspitz.nl.ebox/" style="text-decoration:none; color:#000;"><b>View</b></a>
</multiline>
</td>
</tr>
</tbody>
</table>
</td>
<tr>
<tr>
<td colspan="3" height="20"></td>
</tr>
<tr align='center'>
<td colspan="2"><b>Executable : <span style="color:green;">YES</span></b></td>
</tr>
<tr>
<td colspan="3" height="20"></td>
</tr>
</table>
</td>
<td width="100" height="10"></td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="#ffffff">
<td colspan="3" height="20"></td>
</tr>
</table>
<!-- // END BODY -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- BEGIN FOOTER // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateFooter">
<tr>
<td valign="top" style="background-color:#ffd668;" class="footerContent" mc:edit="footer_content00">
<a style="border: 0;" href="http://www.fingerspitz.nl">
<img src=" width="182" height="30">
</a>
</td>
</tr>
</table>
<!-- // END FOOTER -->
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>推荐阅读
- node.js - 尝试从节点 js 中删除 S3 对象时访问被拒绝
- python - Python 脚本在 pycharm 中运行，但不在 ubuntu 终端中运行
- javascript - 如何添加多个选择选项
- spring-boot - 在 Stripe Dashboard Webhooks 端点中添加授权请求标头
- c# - 使用自动映射器进行复杂映射
- python - 根据另一列中的值将列的一个值映射到该列的 nan 值
- java - 如何计算字符串中的特定模式？
- symfony - Api 平台 - 替代非规范化？
- javascript - VueJs 部署问题：Chrome 缓存旧版本，不更新应用
- javascript - Highcharts：在百分比/值之间错误地呈现价格