我創建了一個電子郵件模板，該模板在 Windows 版 Outlook 桌面（2016、2019）上呈現錯誤。
整個布局是一個表格，電子郵件的不同部分占據一行 ( <tr>)。
我有兩個嵌套表，每個表都有自己的<tr>，具有完全相同的標記。當我在
標記：
<!DOCTYPE html>
<html lang="">
<style>
body {
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
}
p {
margin: 0;
}
center {
padding: 20px;
background-color: lightyellow;
border: .1px solid gray;
}
center p {
margin: 5px 0;
}
.red {
color: red;
}
.align-center {
text-align: center;
}
.align-end {
text-align: end;
}
.dataTableContainer {
width: 100%;
text-align: left;
}
.dataTable {
width: 100%;
font-size: 14px;
border-collapse: collapse;
border: 0.5px solid gray;
}
.dataTable th, .dataTable td {
text-align: left;
border: 0.1px solid gray;
padding: 8px 5px;
}
.dataTable tr {
font-size: 14px;
mso-line-height-rule: exactly;
line-height: 90%;
}
.dataTable tr:nth-of-type(even) {
background-color: #f2f2f2;
}
.dataTable thead tr th {
border-bottom: 2px solid gray;
}
.dataTable thead tr {
background-color: #f2f2f2;
}
.footerCell {
text-align: center;
}
.brand {
font-size: 12px;
letter-spacing: 5px;
}
.main_brand {
font-size: 18px;
font-weight: bold;
font-style: italic;
letter-spacing: 1.8px;
}
.main_brand span {
font-size: 15px;
font-weight: initial;
}
</style>
<body>
<table width="100%">
<tr width="100%">
<td>
<p>Dear Customer,</p>
</td>
</tr>
<tr width="100%" align="center">
<td height="13" valign="middle" style="margin: 0; font-size: 0px; line-height: 0px;"> </td>
</tr>
<tr width="100%" align="center">
<td>
<center>
<p class="red">
<b>YOU HAVE ACCOUNTS WHICH ARE PAST DUE</b>
</p>
<p>The below orders are scheduled to ship in the next few days and are</p>
<p class="red">
<b>AT RISK DUE TO CUSTOMER PAST DUE BALANCE</b>
</p>
<p>
In order to avoid delays, please collect payment ASAP. These orders will not be released until payment is received
</p>
<p>
Click the link below to view the customer statement
</p>
</center>
</td>
</tr>
<tr width="100%" align="center">
<td height="13" valign="middle" style="margin: 0; font-size: 0px; line-height: 0px;"> </td>
</tr>
<tr width="100%" align="center">
<td class='dataTableContainer'>
<table cellpadding="0" cellspacing="0" class="dataTable" style="width:100%;">
<thead>
<tr>
<th><b>Order #</b></th>
<th><b>Status</b></th>
<th><b>Customer Name</b></th>
<th><b>Req Ship Date</b></th>
<th><b>Account Due</b></th>
<th><b>Account Past Due</b></th>
<th><b>Statement URL</b></th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="" target="_blank">141926275</a></td>
<td>Partially Shipped</td>
<td>Adam Smith</td>
<td>2021-10-22</td>
<td class="align-end">$471.56</td>
<td class="align-end">$471.57</td>
<td><a href="" target="_blank">View Statement</a></td>
</tr>
<tr>
<td><a href=" target="_blank">141926275</a></td>
<td>Partially Shipped</td>
<td>Adam Smith</td>
<td>2021-10-22</td>
<td class="align-end">$471.56</td>
<td class="align-end">$471.57</td>
<td><a href="" target="_blank">View Statement</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr width="100%" align="center">
<td height="13" valign="middle" style="margin: 0; font-size: 0px; line-height: 0px;"> </td>
</tr>
<tr width="100%" align="center">
<td class='dataTableContainer'>
<table cellpadding="0" cellspacing="0" class="dataTable" style="width:100%;">
<thead>
<tr>
<th><b>Order #</b></th>
<th><b>Status</b></th>
<th><b>Customer Name</b></th>
<th><b>Req Ship Date</b></th>
<th><b>Account Due</b></th>
<th><b>Account Past Due</b></th>
<th><b>Statement URL</b></th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="" target="_blank">141926275</a></td>
<td>Partially Shipped</td>
<td>Adam Smith</td>
<td>2021-10-22</td>
<td class="align-end">$471.56</td>
<td class="align-end">$471.57</td>
<td><a href="" target="_blank">View Statement</a></td>
</tr>
<tr>
<td><a href="" target="_blank">141926275</a></td>
<td>Partially Shipped</td>
<td>Adam Smith</td>
<td>2021-10-22</td>
<td class="align-end">$471.56</td>
<td class="align-end">$471.57</td>
<td><a href="" target="_blank">View Statement</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>
</html>
uj5u.com熱心網友回復：
通過反復試驗，我發現了 CSS 的罪魁禍首。
body {
padding: 20px;
}
padding在body是造成第二個表以獲得比第一窄。更換padding用margin的伎倆。
我仍然不知道為什么padding會造成麻煩。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/352359.html
標籤：电子邮件 html-table 外表
上一篇：Python-eml檔案編輯