<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="border:2px solid #ffffff; padding: 8px 10px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; text-decoration:none;">
<h3 style="color:#FFFFFF;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-style:normal;font-weight:bold;line-height:150%;letter-spacing:2px;text-decoration:none;text-align:center;">
<a alias="" conversion="false" data-linkto="https://" href="google.com" style="color:#ffffff;text-decoration:none; " title="Book Appointment">
<span>BOOK AN APPOINTMENT<br>
TO VISIT US TOMORROW</span></a>
</h3>
</td>
</tr>
</table>
无论我在边框上添加什么样式,它总是包裹整个单元格,而不包裹单元格 content 本身。
代码如下:
如果我将其添加到span元素上,它将完全破坏边框,如下所示:
这就是我需要的方式:
我在这里做什么错了?
答案 0 :(得分:3)
这非常简单,可以在所有电子邮件客户端中保持一致。
单行文本:
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="" style="margin: auto;">
<tr>
<td style="text-align: center;">
<h3 style="margin: 0;"><a href="#" style="border: 2px solid #ffffff; font-family: sans-serif; font-weight: bold; font-size: 16px; line-height: 22px; text-decoration: none; padding: 20px 30px; color: #ff0000; display: block; letter-spacing: 2px;">Book An Appointment<br />To Visit Us Tomorrow</a></h3>
</td>
</tr>
</table>
两行文本:
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="260" style="margin: 0; border: 2px solid #ff0000;">
<tr>
<td style="background: #222222; border: 8px solid #222222; text-align: center;">
<div style="padding: 10px 15px;">
<a href="#" style="background: #222222; border: 1px solid #222222; font-family: sans-serif; font-weight: bold; font-size: 16px; line-height: 22px; text-decoration: none; color: #ffffff; display: block; letter-spacing: 2px; mso-line-height-alt: 22px;">Book An Appointment To Visit Us Tomorrow</a>
</div>
</td>
</tr>
</table>
除非您需要<h3>
用于屏幕阅读器,否则建议将其删除。
祝你好运。
答案 1 :(得分:2)
针对您的问题有很多解决方案: 一种是在单元格内容周围添加一个div,如下所示:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="border:2px solid #ffffff; padding: 8px 10px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; text-decoration:none;">
<div class="contour">
<h3 style="color:#FFFFFF;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-style:normal;font-weight:bold;line-height:150%;letter-spacing:2px;text-decoration:none;text-align:center;">
<a alias="" conversion="false" data-linkto="https://" href="google.com" style="color:#ffffff;text-decoration:none; " title="Book Appointment">
<span>BOOK AN APPOINTMENT<br>
TO VISIT US TOMORROW</span></a>
</h3>
</div>
</td>
</tr>
</table>
a
另一种方法是使用table {background:black}
a {
display:block;
border:2px solid #ccc;
width: 50%;
margin: 0 auto;
padding:10px;
}
元素作为文字周围的块
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="border:2px solid #ffffff; padding: 8px 10px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; text-decoration:none;">
<div class="contour">
<h3 style="color:#FFFFFF;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-style:normal;font-weight:bold;line-height:150%;letter-spacing:2px;text-decoration:none;text-align:center;">
<a alias="" conversion="false" data-linkto="https://" href="google.com" style="color:#ffffff;text-decoration:none; " title="Book Appointment">
<span>BOOK AN APPOINTMENT<br>
TO VISIT US TOMORROW</span></a>
</h3>
</div>
</td>
</tr>
</table>
{{1}}
答案 2 :(得分:1)
将边框放在h3
上并使其inline-block
td {
background: grey;
text-align: center;
}
h3 {
border: 1px solid white;
display: inline-block;
}
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding: 8px 10px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; text-decoration:none;">
<h3 style="color:#FFFFFF;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-style:normal;font-weight:bold;line-height:150%;letter-spacing:2px;text-decoration:none;text-align:center;">
<a alias="" conversion="false" data-linkto="https://" href="google.com" style="color:#ffffff;text-decoration:none; " title="Book Appointment">
<span>BOOK AN APPOINTMENT<br>
TO VISIT US TOMORROW</span></a>
</h3>
</td>
</tr>
</table>
答案 3 :(得分:1)
请勿设置表格样式,设置内容样式并简化标记:
<td>
<a alias="" conversion="false" data-linkto="https://" href="google.com"
style="display:inline-block;border:2px solid #ffffff; padding: 8px 10px;color:#FFFFFF;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-style:normal;font-weight:bold;line-height:150%;letter-spacing:2px;text-decoration:none;text-align:center;" title="Book Appointment">
BOOK AN APPOINTMENT<br>
TO VISIT US TOMORROW</a>
</td>