删除 html table td 之间的白线
Remove white line between html table td's
我正在创建一个 HTML 电子邮件模板，并最终（经过数小时的挫折发现更多阻碍 HTML 技术过时的因素）得到了我喜欢的设计。我已经删除了我将实际使用的图像，因此对于粗糙的照片深表歉意。但我正在尝试删除两个 td 之间的白色单元格线。我删除了 cell-padding 和 cell-spacing，认为它会对 table 产生全局影响。但我错了。我也在每个 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>
我在 Windows 台式机上的 Outlook 中查看 html 封电子邮件时遇到了这个问题。如果那是你的问题，你可以在结束前添加这个片段
<!--[if gte mso 12]><p style="font-size:12px;line-height:12px;> </p><![endif]-->
或者试试这个：将 <td id="backgroundContent"> 上的背景图像 属性 更改为简单的背景：#114496 url(https://i.ibb.co/vV22b3P/testesttest.png);
我用一些 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>
我正在创建一个 HTML 电子邮件模板，并最终（经过数小时的挫折发现更多阻碍 HTML 技术过时的因素）得到了我喜欢的设计。我已经删除了我将实际使用的图像，因此对于粗糙的照片深表歉意。但我正在尝试删除两个 td 之间的白色单元格线。我删除了 cell-padding 和 cell-spacing，认为它会对 table 产生全局影响。但我错了。我也在每个 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>
我在 Windows 台式机上的 Outlook 中查看 html 封电子邮件时遇到了这个问题。如果那是你的问题，你可以在结束前添加这个片段
<!--[if gte mso 12]><p style="font-size:12px;line-height:12px;> </p><![endif]-->
或者试试这个：将 <td id="backgroundContent"> 上的背景图像 属性 更改为简单的背景：#114496 url(https://i.ibb.co/vV22b3P/testesttest.png);
我用一些 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>