我正在创建一个HTML电子邮件模板，终于（经过数小时的挫折后，发现更多有关HTML技术过时的障碍），得到了我喜欢的设计。我已经删除了我将实际使用的图像，因此对总照片表示歉意。但是我正在尝试删除两个td之间的白色单元格。我删除了cell-padding和cell-spacing，以为它会对表格产生全局影响。但是我错了。我还在每一个td上使用了它，但是仍然不高兴，我们将不胜感激。
P.S，谢谢Gmail，因为它使标记看起来很难看并且不得不使用内联样式
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400" rel="stylesheet">
<style type="text/css">
}
@media only screen and (max-width: 400px) {
table {
width: 325px !important;
margin: 0 auto;
}
#backgroundContent {
height: 585px;
}
#buttonContainer {
right: 1%;
}
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" style="width:400px !important; max-width:450px !important; margin: 0 auto;">
<tbody>
<tr>
<td id="backgroundContent" colspan="2" cellspacing="0" cellpadding="0" style="text-align: center; width: 100%; height: 515px; background-image: url(https://i.ibb.co/vV22b3P/testesttest.png); background-size: cover; background-position: 40% 0%;">
<div id="leftContent" style="width: 50%; height: inherit; float: left; position: relative;">
<p style="position: absolute; width: 90%; padding: 280px 0 0 0; margin: 0 auto; z-index: 10; text-align: left; margin-left: 12%; color: #ffffff; font-family: Nunito; font-weight: 300; font-size: 14px;">
cursus a congue at, pharetra vel justo. Maecenas eget elit id nulla lobortis vestibulum eget fermentum nisi. Sed et tortor nunc. Proin id ornare dui. In risus arcu, aliquam et vulputate placerat, tempor ut elit. In ac placerat velit. Aliquam turpis dui,
lobortis ut consequat et, cursus vel
</p>
</div>
<div id="rightContent" style="width: 50%; height: inherit; float: left; position: relative;">
<div id="buttonContainer" style="display: flex; position: absolute; height: 30%; width: 85%; padding: 320px 0px 0 0;">
<ul style="list-style: none; text-decoration: none; text-align: center;">
<li style="background-color: transparent; width: 70%; padding: 15px; margin-bottom: 8%; border: 1px solid #ffffff; border-radius: 5px; text-transform: uppercase; font-family: Nunito; font-size: 12px; color: #ffffff;">
<a href="https://www.google.com" style="text-decoration: none; color: #ffffff; cursor: pointer;">Mauris sit</a>
</li>
<li style="background-color: transparent; width: 70%; padding: 15px; margin-bottom: 8%; border: 1px solid #ffffff; border-radius: 5px; text-transform: uppercase; font-family: Nunito; font-size: 12px; color: #ffffff;">
<a href="*|CENTRE_NUMBER|*" style="text-decoration: none; color: #ffffff; cursor: pointer;">Mauris sit amet</a>
</li>
</ul>
</div>
</div>
</td>
</tr>
<tr cellspacing="0" cellpadding="0">
<td cellspacing="0" cellpadding="0" style="background-color: #114496">
<p style="float: right; text-align: right; margin-right: 25px; font-family: Nunito; font-size: 12px; color: #ffffff;">
Mauris sit amet<br>Mauris sit amet
</p>
</td>
</tr>
<tr>
</tbody>
</table>
</body>
</html>
答案 0 :(得分：1)
我可以通过一些CSS技巧摆脱白线。在底部td上，我添加了：
margin-top: -1px;
display: inline-block;
width: 100%;
查看有效代码段：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400" rel="stylesheet">
<style type="text/css">
}
@media only screen and (max-width: 400px) {
table {
width: 325px !important;
margin: 0 auto;
}
#backgroundContent {
height: 585px;
}
#buttonContainer {
right: 1%;
}
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" style="width:400px !important; max-width:450px !important; margin: 0 auto;">
<tbody>
<tr>
<td id="backgroundContent" colspan="2" cellspacing="0" cellpadding="0" style="text-align: center; width: 100%; height: 515px; background-image: url(https://i.ibb.co/vV22b3P/testesttest.png); background-size: cover; background-position: 40% 0%;">
<div id="leftContent" style="width: 50%; height: inherit; float: left; position: relative;">
<p style="position: absolute; width: 90%; padding: 280px 0 0 0; margin: 0 auto; z-index: 10; text-align: left; margin-left: 12%; color: #ffffff; font-family: Nunito; font-weight: 300; font-size: 14px;">
cursus a congue at, pharetra vel justo. Maecenas eget elit id nulla lobortis vestibulum eget fermentum nisi. Sed et tortor nunc. Proin id ornare dui. In risus arcu, aliquam et vulputate placerat, tempor ut elit. In ac placerat velit. Aliquam turpis dui,
lobortis ut consequat et, cursus vel
</p>
</div>
<div id="rightContent" style="width: 50%; height: inherit; float: left; position: relative;">
<div id="buttonContainer" style="display: flex; position: absolute; height: 30%; width: 85%; padding: 320px 0px 0 0;">
<ul style="list-style: none; text-decoration: none; text-align: center;">
<li style="background-color: transparent; width: 70%; padding: 15px; margin-bottom: 8%; border: 1px solid #ffffff; border-radius: 5px; text-transform: uppercase; font-family: Nunito; font-size: 12px; color: #ffffff;">
<a href="https://www.google.com" style="text-decoration: none; color: #ffffff; cursor: pointer;">Mauris sit</a>
</li>
<li style="background-color: transparent; width: 70%; padding: 15px; margin-bottom: 8%; border: 1px solid #ffffff; border-radius: 5px; text-transform: uppercase; font-family: Nunito; font-size: 12px; color: #ffffff;">
<a href="*|CENTRE_NUMBER|*" style="text-decoration: none; color: #ffffff; cursor: pointer;">Mauris sit amet</a>
</li>
</ul>
</div>
</div>
</td>
</tr>
<tr cellspacing="0" cellpadding="0">
<td cellspacing="0" cellpadding="0" style="background-color: #114496;margin-top: -1px;display: inline-block;width: 100%;">
<p style="float: right; text-align: right; margin-right: 25px; font-family: Nunito; font-size: 12px; color: #ffffff;">
Mauris sit amet<br>Mauris sit amet
</p>
</td>
</tr>
<tr>
</tbody>
</table>
</body>
</html>
答案 1 :(得分：0)
我在Windows台式机上的Outlook中查看的html电子邮件中遇到了此问题。如果是您的问题，则可以在结束之前添加此代码段
<!--[if gte mso 12]><p style="font-size:12px;line-height:12px;> </p><![endif]-->
或尝试执行以下操作：将<td id="backgroundContent">上的background-image属性更改为简单背景：＃114496 url（On ESLint）;