I created an email template from the email template editor. Each mail elements consists of nested table tags. I created a table containing all these elements and tried to border the , tags, but there is a space between the top and bottom elements and the border.
Here is my HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" style="font-family:ProximaNova,sans-serif">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="telephone=no" name="format-detection">
<title>İş Bankası Emeklileri Derneği</title>
<style type="text/css">
#outlook a {
padding:0;
}
.es-button {
mso-style-priority:100!important;
text-decoration:none!important;
}
a[x-apple-data-detectors] {
color:inherit!important;
text-decoration:none!important;
font-size:inherit!important;
font-family:ProximaNova,sans-serif !important;
font-weight:inherit!important;
line-height:inherit!important;
}
.es-desk-hidden {
display:none;
float:left;
overflow:hidden;
width:0;
max-height:0;
line-height:0;
mso-hide:all;
}
[data-ogsb] .es-button {
border-width:0!important;
padding:10px 20px 10px 20px!important;
}
.es-button-border:hover a.es-button, .es-button-border:hover button.es-button {
background:#56d66b!important;
border-color:#56d66b!important;
}
.es-button-border:hover {
border-color:#42d159 #42d159 #42d159 #42d159!important;
background:#56d66b!important;
}
@media only screen and (max-width:600px) {p, ul li, ol li, a { line-height:150%!important } h1, h2, h3, h1 a, h2 a, h3 a { line-height:120% } h1 { font-size:30px!important; text-align:left } h2 { font-size:24px!important; text-align:left } h3 { font-size:20px!important; text-align:left } .es-header-body h1 a, .es-content-body h1 a, .es-footer-body h1 a { font-size:30px!important; text-align:left } .es-header-body h2 a, .es-content-body h2 a, .es-footer-body h2 a { font-size:24px!important; text-align:left } .es-header-body h3 a, .es-content-body h3 a, .es-footer-body h3 a { font-size:20px!important; text-align:left } .es-menu td a { font-size:14px!important } .es-header-body p, .es-header-body ul li, .es-header-body ol li, .es-header-body a { font-size:14px!important } .es-content-body p, .es-content-body ul li, .es-content-body ol li, .es-content-body a { font-size:14px!important } .es-footer-body p, .es-footer-body ul li, .es-footer-body ol li, .es-footer-body a { font-size:14px!important } .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li, .es-infoblock a { font-size:12px!important } *[] { display:none!important } .es-m-txt-c, .es-m-txt-c h1, .es-m-txt-c h2, .es-m-txt-c h3 { text-align:center!important } .es-m-txt-r, .es-m-txt-r h1, .es-m-txt-r h2, .es-m-txt-r h3 { text-align:right!important } .es-m-txt-l, .es-m-txt-l h1, .es-m-txt-l h2, .es-m-txt-l h3 { text-align:left!important } .es-m-txt-r img, .es-m-txt-c img, .es-m-txt-l img { display:inline!important } .es-button-border { display:inline-block!important } a.es-button, button.es-button { font-size:18px!important; display:inline-block!important } .es-adaptive table, .es-left, .es-right { width:100%!important } .es-content table, .es-header table, .es-footer table, .es-content, .es-footer, .es-header { width:100%!important; max-width:600px!important } .es-adapt-td { display:block!important; width:100%!important } .adapt-img { width:100%!important; height:auto!important } .es-m-p0 { padding:0px!important } .es-m-p0r { padding-right:0px!important } .es-m-p0l { padding-left:0px!important } .es-m-p0t { padding-top:0px!important } .es-m-p0b { padding-bottom:0!important } .es-m-p20b { padding-bottom:20px!important } .es-mobile-hidden, .es-hidden { display:none!important } tr.es-desk-hidden, td.es-desk-hidden, table.es-desk-hidden { width:auto!important; overflow:visible!important; float:none!important; max-height:inherit!important; line-height:inherit!important } tr.es-desk-hidden { display:table-row!important } table.es-desk-hidden { display:table!important } td.es-desk-menu-hidden { display:table-cell!important } .es-menu td { width:1%!important } table.es-table-not-adapt, .esd-block-html table { width:auto!important } table.es-social { display:inline-block!important } table.es-social td { display:inline-block!important } .es-desk-hidden { display:table-row!important; width:auto!important; overflow:visible!important; max-height:inherit!important } }
</style>
</head>
<body style="width:100%;font-family:ProximaNova,sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0">
<div style="background-color:#FFFFFF">
<table cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;padding:0;Margin:0;width:100%;height:100%;background-repeat:repeat;background-position:center top;background-color:#FFFFFF">
<tr>
<td valign="top" style="padding:0;Margin:0">
<table cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;width:600px;padding: 0;">
<tr>
<td align="center" style="padding:0;Margin:0;border: 2px solid #2D588C; border-collapse: collapse;">
<table cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;width:600px;">
<tr>
<td align="center" style="padding:0;Margin:0;height: 24px;background-color: #2D588C;width: 100%;line-height: 0;">
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:600px">
<tr>
<td align="center" style="padding:0;Margin:0">
<table cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;width:600px;">
<tr>
<td align="left" style="padding:0;Margin:0;">
<table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr>
<td valign="top" align="center" style="padding:0;Margin:0;width:560px">
<table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr>
<td align="left" style="padding:0px;Margin:0"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:ProximaNova,sans-serif;line-height:21px;color:#2D588C;font-size:14px;background-color: #2D588C;;">navbar</p></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:600px;background-color:transparent;background-repeat:repeat;background-position:center top">
<tr>
<td align="center" style="padding:0;Margin:0">
<table cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;width:600px;">
<tr>
<td align="left" style="Margin:0;padding-top:0px;padding-bottom:8px;padding-left:24px;padding-right:24px"><!--[if mso]><table style="width:560px" cellpadding="0" cellspacing="0"><tr><td style="width:273px" valign="top"><![endif]-->
<table cellspacing="0" cellpadding="0" align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left">
<tr>
<td align="left" style="padding:0;Margin:0;width:273px">
<table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr>
<td align="center" style="padding:15px;Margin:0;font-size:0px"><a target="_blank" href="https://www.isemder.org.tr/" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;text-decoration:underline;color:#FFFFFF;font-size:14px"><img src="https://ayvgzb.stripocdn.email/content/guids/CABINET_eb08dc9df3ba5c6c1bf9ff1e3de79aa49c1c34faf361fe8f44c704417369282b/images/logo.png" alt style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic" height="77"></a></td>
</tr>
</table></td>
</tr>
</table><!--[if mso]></td><td style="width:15px"></td><td style="width:272px" valign="top"><![endif]-->
<table cellspacing="0" cellpadding="0" align="right" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:right">
<tr>
<td align="left" style="padding:0;Margin:0;width:272px">
<table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr>
<td align="left" style="padding:0;Margin:0;font-family:ProximaNova,sans-serif;">
<p style="font-size: 14px; line-height: 140%; text-align: justify;margin-top: 0px;margin-bottom: 5px;"><span style="font-size: 16px; line-height: 22.4px; color: #2D588C;"><strong>Some text</strong></span></p>
</td>
</tr>
</table></td>
</tr>
</table><!--[if mso]></td></tr></table><![endif]--></td>
</tr>
</table></td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;width:600px;">
<tr>
<td align="center" style="padding:0;Margin:0;height: 24px;background-color: #2D588C;width: 100%;line-height: 0;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
how do i remove border and space between first and last element in email?
CodePudding user response：
Not sure if you are looking for this. But if you can explain which elements you are referring to and where exactly you want the borders to appear I might be able to help.
body {
width: 100%;
display: flex;
justify-content: center;
}
div {
border: 2px solid red;
}
table {
background-color: #2D588C;
text-align: center;
}
thead tr td {
color: white;
font-size: 20px;
font-weight: 600;
}
tbody {
width: inherit;
float: left;
background-color: white;
padding: 4px;
}
td {
font-weight="bold";
border: 2px solid black;
}<body>
<div>
<table>
<thead>
<tr>
<td colspan="2">header</td>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://ayvgzb.stripocdn.email/content/guids/CABINET_eb08dc9df3ba5c6c1bf9ff1e3de79aa49c1c34faf361fe8f44c704417369282b/images/logo.png"><img src="https://ayvgzb.stripocdn.email/content/guids/CABINET_eb08dc9df3ba5c6c1bf9ff1e3de79aa49c1c34faf361fe8f44c704417369282b/images/logo.png"></a></td>
<td id="nested">
<table id"table2">
<thead>
<tr>
<td colspan="2">Another header</td>
</tr>
</thead>
<tr>
<td>Some Text</td>
<td>Some more text</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>CodePudding user response：
welcome to stack overflow :)
This is one of the surprising problems of the CSS language, and you can fix it by adding this style to your table element:
table {
border-collapse: collapse;
}
And also, you may use flexbox structure for your web designing instead of tables. this is more standard and better.
A full tutorial for flexbox can be found in W3Schools
Good luck