How to make email-templates with a fixed-width for Iphone? If a width is longer than viewport - reduce the scale.
Now the issue I am having seems to be possibly with email sizing within Gmail Client on iOS on the iPhone. Although this template seems to look ok in all clients, the result I am getting in Gmail Client on Iphone looks compressed:
Email template rendering in Android:
Email template rendering in IOS(Iphone):
Html code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Performance Scorecard</title>
</head>
<body>
<table width="640" border="0" cellpadding="0" cellspacing="3" style="font-family: 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px;">
<tr>
<td colspan="2" style="padding-bottom: 5px; text-align: left;">Hi <span>{FirstName}</span>,</td>
</tr>
<tr>
<td colspan="2" style="padding-bottom: 5px; text-align: left;">Your Performance Scorecard for the month of <span>{MonthAndYear}</span> is ready!</td>
</tr>
<tr>
<td width="180" align="left" style="width: 180px; border: 1px solid #CACACA; padding: 3px; border-radius: 5px">
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" style="width: 180px;">
<tr>
<td colspan="2" style="width: 100%; padding-bottom: 20px; padding-top: 3px; text-align: center;"><img src=cid:logoLR width="100"></td>
</tr>
<tr>
<td style="padding-right: 5px;"><img width="65" height="65" style="border-radius: 50%; overflow: hidden;" src=cid:{imgCId}></td>
<td>
<span style="font-size: 14px; font-weight: 500;">{UserName}</span><br /><span style="font-size: 12px; color:#BDBDBD;">{JobTitle}</span><br /><span style="font-size: 12px; color:#BDBDBD;">{TenantName}</span>
</td>
</tr>
<tr>
<td style="font-weight: bold; font-size: 24px; padding-top: 15px; text-align: center;">
<span>{AverageRating}</span>
</td>
<td style="padding-top: 15px;">
<table cellspacing="0" cellpadding="0" border="0" style="font-size: 14px;">
<tr>
<td style="text-align: right; padding-left: 7px;">{RatingsCount}</td>
<td style="padding-left: 5px;">Ratings</td>
</tr>
<tr>
<td style="text-align: right; padding-left: 7px;">{ReviewsCount}</td>
<td style="padding-left: 5px;">Comments</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 15px;">
<table cellpadding="0" border="0" style="width: 100%;">
<tr>
<td style="text-align: center;"><img width="30" height="30" src=cid:{firstStar}></td>
<td style="text-align: center;"><img width="30" height="30" src=cid:{secondStar}></td>
<td style="text-align: center;"><img width="30" height="30" src=cid:{thirdStar}></td>
<td style="text-align: center;"><img width="30" height="30" src=cid:{fourthStar}></td>
<td style="text-align: center;"><img width="30" height="30" src=cid:{fifthStar}></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="490" align="left" valign="middle" style=" width: 495px; border: 1px solid #CACACA; vertical-align: middle; padding: 3px; border-radius: 5px">
<table border="0" cellspacing="0" cellpadding="0" align="left" style="width: 100%;">
<tr>
<td>
<table cellpadding="0" cellspacing="3" border="0">
<tr>
{blockTemplate}
</tr>
</table>
<table cellspacing="3" cellpadding="0" style="width: 100%;">
<tr>
<td style="border: 1px solid #CACACA; padding: 3px;">
<table cellspacing="0" cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
<tr>
<td></td>
<td style="background-color: #95B3D7; border: 1px solid #B4C9E3; text-align: right; padding: 3px 5px; font-size: 11px;">{MonthAndYear}</td>
<td style="background-color: #95B3D7; border: 1px solid #B4C9E3; text-align: right; padding: 3px 5px; font-size: 11px;">Since Go-Live</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">Review Requests Sent</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{SurveysSentPastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{SurveysSentAllTime}</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">Review Requests Responded</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{SurveysRespondedPastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{SurveysRespondedAllTime}</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">Response Rate</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{ResponseRatePastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{ResponseRateAllTime}</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">Online Review Site Redirects</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{ReviewRedirectionsPastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{ReviewRedirectionsAllTime}</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">Online Reviews Added</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{ExternalReviewsAddedPastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{ExternalReviewsAddedAllTime}</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #FFFF; padding: 3px 5px; font-size: 11px;">Conversion Rate</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{ConversionRatePastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{ConversionRateAddedAllTime}</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
{blockComments}
<!-- end main -->
<tr>
<td colspan="2" style="padding-bottom: 5px; text-align: left;">Please click on this link to view your complete scorecard.</td>
</tr>
</table>
</body>
</html>
Related
I can't make border-left all for all rows.
Is it possible without CSS?
style="border-left: 1px solid #000;">
This should be in all rows, but it's not. What am I doing wrong?
<p style="border-bottom: 1px solid #000; color: -internal-quirk-inherit;"> </p>
<table style="background-color: white; font-family: lato; text-align: left; color: #000000; font-size: 14px; line-height: 21px; padding: 10px; height: 42px;">
<tbody>
<tr style="height: 21px;">
<td style="width: 100px; padding-right: 50px; padding-left: 50px; text-align: center; height: 42px;" rowspan="4">
<p>
<img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/JEMIOL.png" width="100px" />
</p>
<p>
<img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/FACEBOOK.png" width="25px" />
<img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/INSTAGRAM.png" width="25px" />
<img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/LINKEDIN.png" width="25px" />
</p>
</td>
<td style="width: 19px; height: 42px;" rowspan="4">
<p style="border-left: 1px solid #000;"> </p>
</td>
<td style="padding-top: 1px; padding-bottom: 1px; font-weight: bold; width: 344px; height: 1px;" colspan="4">DAMIAN DĄBROWSKI</td>
</tr>
<tr style="height: 1px;">
<td style="padding-top: 1px; padding-bottom: 1px; width: 344px; height: 10px;" colspan="4">ADMINISTRATOR STRONY INTERNETOWEJ</td>
</tr>
<tr style="height: 1px;">
<td style="padding-top: 1px; padding-bottom: 1px; width: 344px; height: 21px;" colspan="4"><a style="color: #000000; text-decoration: none;" href="-">-</a></td>
</tr>
<tr style="height: 1px;">
<td style="padding-top: 1px; padding-bottom: 1px; width: 344px; height: 10px;" colspan="4"><a style="color: #000000; text-decoration: none;" href="-">-</a></td>
</tr>
</tbody>
</table>
<p style="border-top: 1px solid #000; color: -internal-quirk-inherit;"> </p>
Right now you only have border on the P tag
You mean
<td style="width: 19px; height: 42px; border-left: 1px solid #000;" rowspan="4">
<p style="border-bottom: 1px solid #000; color: -internal-quirk-inherit;"> </p>
<table style="background-color: white; font-family: lato; text-align: left; color: #000000; font-size: 14px; line-height: 21px; padding: 10px; height: 42px;">
<tbody>
<tr style="height: 21px; ">
<td style="width: 100px; padding-right: 50px; padding-left: 50px; text-align: center; height: 42px;" rowspan="4">
<p>
<img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/JEMIOL.png" width="100px" />
</p>
<p>
<img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/FACEBOOK.png" width="25px" />
<img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/INSTAGRAM.png" width="25px" />
<img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/LINKEDIN.png" width="25px" />
</p>
</td>
<td style="width: 19px; height: 42px; border-left: 1px solid #000;" rowspan="4">
<p> </p>
</td>
<td style="padding-top: 1px; padding-bottom: 1px; font-weight: bold; width: 344px; height: 1px;" colspan="4">DAMIAN DĄBROWSKI</td>
</tr>
<tr style="height: 1px;">
<td style="padding-top: 1px; padding-bottom: 1px; width: 344px; height: 10px;" colspan="4">ADMINISTRATOR STRONY INTERNETOWEJ</td>
</tr>
<tr style="height: 1px;">
<td style="padding-top: 1px; padding-bottom: 1px; width: 344px; height: 21px;" colspan="4"><a style="color: #000000; text-decoration: none;" href="-">-</a></td>
</tr>
<tr style="height: 1px;">
<td style="padding-top: 1px; padding-bottom: 1px; width: 344px; height: 10px;" colspan="4"><a style="color: #000000; text-decoration: none;" href="-">-</a></td>
</tr>
</tbody>
</table>
<p style="border-top: 1px solid #000; color: -internal-quirk-inherit;"> </p>
I want to put the <a> tag over the border like the image, but it must be responsive in outlook 2013.
Outlook doesn't support Max-Height , paddings only in table elements ( td, th, tr ) , any question https://www.campaignmonitor.com/css/
<table style="padding-left:28px;padding-right:27px;" cellpadding="0" cellspacing="0" width="100%" align="left"
border="0">
<tr>
<td height="50" class="block" style="border:10px solid #efefef;text-align:left; padding: 20px 20px 0px 20px;">
<p style="color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:10px;text-align:justify; margin: 0;
color: #737373;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 9px;">Example</p>
<p style="margin:0;color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:15px; ">Example
xxxx</p>
<table style="color:white;border-left: 10px solid #ffffff;
border-right: 10px solid #ffffff;"
width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top" style="padding:0px 0px 0px 0px;" bgcolor="#ed1c2e">
<a style="color:#ffffff;outline:none;cursor:pointer;width:100%;height:40px;border:none;padding-left:0px;padding-right:0px;font-size:16px;font-weight:700; text-align: center;">See
more <i style=" font-size: 29px;
vertical-align: -5px;
font-style: normal;">➝</i>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Update
Okay so i didn't see the image because I'm an idiot.
So here is what I've done
I made the a position:relative
Then added the follwoing to the inline style:
border: white solid 10px;
bottom: -37px;
because your using outlook I'm doing things that i wouldn't recommend you use in real world css. There are better ways of doing things.
I then added the following to your table:
margin-top: -30px;
This just moves it up in the air so it doesn't create such a big gap between text and button.
<table style="padding-left:28px;padding-right:27px;position: relative;" cellpadding="0" cellspacing="0" width="100%" align="left" border="0">
<tbody><tr>
<td height="50" class="block" style="border:10px solid #efefef;text-align:left; padding: 20px 20px 0px 20px;">
<p style="color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:10px;text-align:justify; margin: 0;
color: #737373;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 9px;">Example</p>
<p style="margin:0;color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:15px;padding: 20px;">Example
xxxx</p>
<table style="
color:white;
padding-bottom: 0px;
" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td align="center" valign="" style="padding:0px 0px 0px 0px;padding: -20px;position: relative;width: 100%;top: bottom;bottom: 20px;text-align: center;">
<a href="#" target="_blank" style="text-decoration:none;color:#ffffff;outline:none;width:90%;height:40px;border:none;padding-left:0px;padding-right:0px;font-size:16px;font-weight:700;text-align: center;background: #ed1c2e;display: block;position: absolute;border: white solid 10px;top: 0px;z-index: 200;left: 50%;transform: translateX(-50%);">See
more <i style=" font-size: 29px;
vertical-align: -5px;
font-style: normal;">➝</i>
</a>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
OLD AWNSER
Ill be honest im not 100% sure what you want. I'm guessing its this?
What are you using max-height for?
Is this what you would like?
<table style="padding-left:28px;padding-right:27px;" cellpadding="0" cellspacing="0" width="100%" align="left"
border="0">
<tr>
<td height="50" class="block" style="border:10px solid #efefef;text-align:left; padding: 20px 20px 0px 20px;">
<p style="color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:10px;text-align:justify; margin: 0;
color: #737373;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 9px;">Example</p>
<p style="margin:0;color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:15px; ">Example
xxxx</p>
<table style="color:white;border-left: 10px solid #ffffff;
border-right: 10px solid #ffffff;"
width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top" style="padding:0px 0px 0px 0px;">
<a style="color:#ffffff;outline:none;cursor:pointer;width:100%;height:40px;border:none;padding-left:0px;padding-right:0px;font-size:16px;font-weight:700; text-align: center; background: #ed1c2e; display: block">See
more <i style=" font-size: 29px;
vertical-align: -5px;
font-style: normal;">➝</i>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
All you were missing was display: block; In the a Tag.
If this isn't what you wanted please comment and ill adjust
Here it is, an working example of what you are looking for:
<html>
<head>
<style>
button:focus {
outline: none;
cursor: pointer
}
body {
font-family: 'Arial';
}
</style>
</head>
<body>
<table style="padding-left:28px;padding-right:27px;" cellpadding="0" cellspacing="0" width="100%" align="left" border="0">
<tbody>
<tr>
<td height="50" class="block" style="border:10px solid #efefef;text-align:left;padding: 20px 20px 0px 20px;border-bottom: 0px;">
<p style="color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:10px;text-align:justify; margin: 0;
color: #737373;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 9px;">Campanha</p>
<p style="margin:0;color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:15px; ">Estratégia
nacional de Turismo 2027</p>
</td>
</tr>
</tbody>
</table>
<table style="padding-left:28px;padding-right:27px;" cellpadding="0" cellspacing="0" width="100%" align="left" border="0">
<tbody>
<tr>
<td style="margin: 0px;padding: 0px;width: 10px;">
<table style="color:white;background-color: #efefef;padding: 10px 0px 0px 0px;margin-right: 10px;" width="" align="right" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td bgcolor="#ed1c2e" style="
text-align: center;
padding-left: 20px;
padding-top: 24px;
width: 23px;
background-color: white;
">
</td>
</tr>
</tbody>
</table>
</td>
<td align="center" valign="top" style="padding: 0px 0px 0px 0px;" bgcolor="#ed1c2e">
<a style="color:#ffffff;outline:none;cursor:pointer;width:100%;height:40px;border:none;padding-left:0px;padding-right:0px;font-size:16px;font-weight:700; text-align: center;">Ver
mais <i style="font-size: 29px; vertical-align: -5px; font-style: normal;">?</i>
</a>
</td>
<td style="margin: 0px; padding: 0px; width: 10px;">
<table style="color:white;background-color: #efefef;padding: 10px 0px 0px 0px;margin-left: 10px;" width="" align="right" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td bgcolor="#ed1c2e" style="
text-align: center;
padding-right: 20px;
padding-top: 24px;
width: 23px;
background-color: white;
">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
Unfortunately float Left does not work
I searched but not found a solution. My intention is to place the last box in the 2. row. Where is my mistake? Please zoom to 80% in the preview if you use the button "Run code snippet"
<body leftmargin="0" topmargin="6" marginheight="6" marginwidth="6" align="center" class="main" style="cursor: auto;">
<div style="position: relative;">
<div padding="4px" width="150" style="float: left; width: 150px; text-align: center; border: 1px solid black; background-color: white; padding: 4px; margin: 0px 0px 10px 10px; border-radius: 6px;"><table align="left" cellpadding="4" cellspacing="1" text-align="left" style="width: 150%; margin-top: 4px; margin-left: 1px;">
<tbody>
<tr>
<th align="center" colspan="1">Lorem</th>
</tr>
<tr>
<td align="left">Loren <button>Ipsum</button></td>
</tr>
<tr>
<td align="left">Loren <button>Lorem</button></td>
</tr>
</tbody>
</table>
</div>
<div class="img-rounded" style="float: left; text-align: center; border: 1px solid black; background-color: white; padding: 4px; width: 150px; margin: 0px 0px 10px 10px; border-radius: 6px;">
<table align="center" cellpadding="5" cellspacing="0" text-align="left">
<tbody>
<tr>
<th align="center" colspan="6" style="text-align: center;">Lorem ipsum lorem</th>
</tr>
<tr>
<td><input name="val" type="Radio" value="a">ipsum</td>
<td><input name="val" type="Radio" value="b">ipsum</td>
</tr>
<tr>
<td align="center" colspan="6"><button>Lorem</button></td>
</tr>
</tbody>
</table>
</div>
<div class="img-rounded" style="clear: both; text-align: center; border: 1px solid black; background-color: white; padding: 4px; width: 150px; margin: 0px 0px 10px 10px; border-radius: 6px;"><table align="center" cellpadding="12" cellspacing="12" text-align="center" style="margin-top: 3px;">
<tbody>
<tr>
<th align="center" colspan="2" style="text-align: center;">Lorem</th>
</tr>
<tr>
<td align="left">Lorem Lorem Lorem Lorem Lorem Lorem </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:lightgreen; clear: both; text-align: center; border: 1px solid black; padding: 4px; width: 150px; margin:
0px 0px 10px 10px; border-radius: 6px;"><table align="center" cellpadding="2" cellspacing="0" text-align="left" style="margin-top: 4px;">
<tbody>
<tr>
<th align="center" colspan="3" style="text-align: center">I want to be in the second row</th>
</tr>
<tr>
<td><input name="freq_val" type="Radio" value="50">Please</td>
<td><input name="freq_val" type="Radio" value="60">Help</td>
</tr>
<tr>
<td align="center" colspan="3"><button>Thank You</button></td>
</tr>
</tbody>
</table>
</div>
<div style="position: absolute; top: 542px; left: 24px; width: 20px; height: 20px; text-align: center; visibility: hidden; background-color: red; border-radius: 6px;"></div>
<div style="position: absolute; top: 542px; left: 60px; width: 600px; height: 20px; text-align: left; visibility: hidden; background-color: white;">infos</div>
<span class="list-group-item" an_id " style="display: none; position: absolute; top: 720px; border: none;">
</span>
</div>
</body>
You had some clear: both; properties placed wrong, and a missing float: left; :)
<body leftmargin="0" topmargin="6" marginheight="6" marginwidth="6" align="center" class="main" style="cursor: auto;">
<div style="position: relative;">
<div padding="4px" width="150" style="float: left; width: 150px; text-align: center; border: 1px solid black; background-color: white; padding: 4px; margin: 0px 0px 10px 10px; border-radius: 6px;"><table align="left" cellpadding="4" cellspacing="1" text-align="left" style="width: 150%; margin-top: 4px; margin-left: 1px;">
<tbody>
<tr>
<th align="center" colspan="1">Lorem</th>
</tr>
<tr>
<td align="left">Loren <button>Ipsum</button></td>
</tr>
<tr>
<td align="left">Loren <button>Lorem</button></td>
</tr>
</tbody>
</table>
</div>
<div class="img-rounded" style="float: left; text-align: center; border: 1px solid black; background-color: white; padding: 4px; width: 150px; margin: 0px 0px 10px 10px; border-radius: 6px;">
<table align="center" cellpadding="5" cellspacing="0" text-align="left">
<tbody>
<tr>
<th align="center" colspan="6" style="text-align: center;">Lorem ipsum lorem</th>
</tr>
<tr>
<td><input name="val" type="Radio" value="a">ipsum</td>
<td><input name="val" type="Radio" value="b">ipsum</td>
</tr>
<tr>
<td align="center" colspan="6"><button>Lorem</button></td>
</tr>
</tbody>
</table>
</div>
<div class="img-rounded" style="clear: both; float: left; text-align: center; border: 1px solid black; background-color: white; padding: 4px; width: 150px; margin: 0px 0px 10px 10px; border-radius: 6px;"><table align="center" cellpadding="12" cellspacing="12" text-align="center" style="margin-top: 3px;">
<tbody>
<tr>
<th align="center" colspan="2" style="text-align: center;">Lorem</th>
</tr>
<tr>
<td align="left">Lorem Lorem Lorem Lorem Lorem Lorem </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:lightgreen; float: left; text-align: center; border: 1px solid black; padding: 4px; width: 150px; margin:
0px 0px 10px 10px; border-radius: 6px;"><table align="center" cellpadding="2" cellspacing="0" text-align="left" style="margin-top: 4px;">
<tbody>
<tr>
<th align="center" colspan="3" style="text-align: center">I want to be in the second row</th>
</tr>
<tr>
<td><input name="freq_val" type="Radio" value="50">Please</td>
<td><input name="freq_val" type="Radio" value="60">Help</td>
</tr>
<tr>
<td align="center" colspan="3"><button>Thank You</button></td>
</tr>
</tbody>
</table>
</div>
<div style="position: absolute; top: 542px; left: 24px; width: 20px; height: 20px; text-align: center; visibility: hidden; background-color: red; border-radius: 6px;"></div>
<div style="position: absolute; top: 542px; left: 60px; width: 600px; height: 20px; text-align: left; visibility: hidden; background-color: white;">infos</div>
<span class="list-group-item" an_id " style="display: none; position: absolute; top: 720px; border: none;">
</span>
</div>
</body>
I'm creating an e-mail template to send out but for some reason, I am unable to create two simple columns in the footer area.
Layout:
Code:
<div style="width: 100%; height: 100%;">
<table style="margin: 0px auto 0px auto; padding: 20px 20px 20px 20px; font: normal 10.5px; color: #777777; width: 100%; height: 100%;" align="center">
<tbody>
<tr>
<td>
<table class="content" style="background: none repeat scroll 0% 0% #FFFFFF; box-shadow: 0px 1px 2px rgba; width: 600px; max-width: 600px; margin: 0px auto;" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF">
<thead>
<tr style="display: inline-block; width: 100%; background: #1F1F1F;" bgcolor="#1F1F1F">
<td style="width: 100%;" align="left" valign="middle">
<h1 style="padding: 15px 15px 15px 15px; color: #FFFFFF;">Test</h1>
</td>
<td style="border-left: 1px solid #FFFFFF;" align="right">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="text-decoration: none; color: #ffffff; text-align: center; padding: 15px 15px 15px 15px; border-bottom: 1px solid #FFFFFF; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px;">test</td>
</tr>
<tr>
<td style="text-decoration: none; color: #ffffff; text-align: center; padding: 15px 15px 15px 15px; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px;">test</td>
</tr>
</tbody>
</table>
</td>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<h4 style="color: #27ccc0; text-align: center; padding: 15px 15px 0px 15px;"> </h4>
</td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
<tfoot>
<tr>
<td>test</td>
<td>test</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</tbody>
</table>
How do I modify the above code to create two simple columns in the footer area, that is still within the e-mail's container?
You should make simple structure of html,
Don't make table in table. You can use rowspan. HTML <th> rowspan Attribute
cells in thead tag, recommend to use th tag HTML <thead> Tag
Don't use this style display:inline-block; on tr tag
Put color style on tr tag if cells doesn't have different color
<div style="width: 100%; height: 100%;">
<table class="content" style="background: none; box-shadow: 0px 1px 2px rgba; width: 600px; max-width: 600px; margin: 0px auto;" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF">
<thead>
<tr style="width: 100%; background: #1F1F1F;color: #FFFFFF;">
<th style="width: 100%;" align="left" valign="middle" rowspan=2>
<h1 style="padding: 15px 15px 15px 15px;">test</h1>
</th>
<th style="border-left: 1px solid #FFFFFF;border-bottom: 1px solid #FFFFFF;text-decoration: none;text-align: center; padding: 15px 15px" align="right">
test
</th>
</tr>
<tr style="width: 100%; background: #1F1F1F;color: #ffffff; ">
<th style="border-left: 1px solid #FFFFFF;text-decoration: none; text-align: center; padding: 15px 15px" align="right">
test
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="background: red;" colspan="2"> </td>
</tr>
<tr>
<td style="background: red;" colspan="2"> </td>
</tr>
<tr>
<td style="background: red;" colspan="2">
<h4 style="color: #27ccc0; text-align: center; padding: 15px 15px 0px 15px;"> </h4>
</td>
</tr>
<tr>
<td style="background: red;" colspan="2"> </td>
</tr>
</tbody>
<tfoot>
<tr style="width: 100%; background: #1F1F1F; color: #ffffff;">
<td>test</td>
<td>test</td>
</tr>
</tfoot>
</table>
</div>
jsfiddle
I have a Table with content and i cannot figure out how to align the content of the spans inside the table.
HERE IS THE FIDDLE
Here is have pasted 2 images. 1st image is actual result and second is desired result.I think that explains it all...
CODE:
<table width="100%" cellspacing="3" cellpadding="0" style="border: 1px solid black; border-collapse: collapse; font-family: arial; font-size: 12px;">
<thead>
<tr style="background-color: #d3d3d3;">
<td colspan="2" style="padding: 5px; font-weight: bold;">Order Details</td>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 5px 0px 0px 5px; font-weight: bold; border-right-width: 1px; border-right-style: solid; border-right-color: #d3d3d3; width: 60%;">Order ID: <span style="font-weight: normal;text-align">#YCKY141</span>
</td>
<td style="padding-left: 20px; font-weight: bold;">Email: <span style="font-weight: normal;">wyz#ymca.com</span></td>
</tr>
<tr>
<td style="padding-left: 5px; font-weight: bold; border-right-width: 1px; border-right-style: solid; border-right-color: #d3d3d3; width: 60%;">Date: <span style="font-weight: normal;">28/03/2014</span>
</td>
<td style="padding-left: 20px; font-weight: bold;">Telephone: <span style="font-weight: normal;">XXX-XXX-XXXX</span>
</td>
</tr>
<tr>
<td style="padding-left: 5px; font-weight: bold; border-right-width: 1px; border-right-style: solid; border-right-color: #d3d3d3; width: 60%;">Payment Method: <span style="font-weight: normal;">On Invoice</span>
</td>
</tr>
<tr>
<td style="padding: 0px 0px 5px 5px; font-weight: bold; border-right-width: 1px; border-right-style: solid; border-right-color: #d3d3d3; width: 60%;">Shipping Method: <span style="font-weight: normal;">Royal Mail</span>
</td>
<td style="padding-left: 20px;"></td>
</tr>
</tbody>
</table>
Little bit changes you have to apply to your table.
have a look at Demo
HTML
<table width="100%" cellspacing="3" cellpadding="0" style="border: 1px solid black; border-collapse: collapse; font-family: arial; font-size: 12px;">
<thead>
<tr style="background-color: #d3d3d3;">
<td colspan="2" style="padding: 5px; font-weight: bold;">Order Details</td>
</tr>
</thead>
<tbody>
<tr>
<td style="border-right-style: solid; border-right-color: #d3d3d3; border-width:1px">
<table>
<tr>
<td style="padding: 5px 0px 0px 5px; font-weight: bold; ; width: 60%;">Order ID:
</td>
<td style="padding-left: 20px;"><span style="font-weight: normal; text-align">#YCKY141</span></td>
</tr>
<tr>
<td style="padding: 0px 0px 5px 5px; font-weight: bold; width: 60%;">Date:
</td>
<td style="padding-left: 20px;"><span style="font-weight: normal;">28/03/2014</span></td>
</tr>
<tr>
<td style="padding: 0px 0px 5px 5px; font-weight: bold; width: 60%;">payment Method:
</td>
<td style="padding-left: 20px;"><span style="font-weight: normal;">OnInvoice</span></td>
</tr>
<tr>
<td style="padding: 0px 0px 5px 5px; font-weight: bold; width: 60%;">Shipping Method:
</td>
<td style="padding-left: 20px;"><span style="font-weight: normal;">Royal Mail</span></td>
</tr>
</table>
</td>
<td style="vertical-align:top">
<table>
<tr>
<td>Email :
</td>
<td>
<span style="font-weight: normal;">wyz#ymca.com</span>
</td>
</tr>
<tr>
<td>Telephone:
</td>
<td>
<span style="font-weight: normal;">XXX-XXX-XXXX</span>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
You just need to use a proper table layout:
<table>
<thead>
<tr>
<td colspan="4" class="headline">Order Details</td>
</tr>
</thead>
<tbody>
<tr>
<td class="first">Order ID:</td>
<td class="second">#YCKY141</td>
<td class="third"></td>
<td class="fourth"></td>
</tr>
<tr>
<td class="first">Date:</td>
<td class="second">2014-03-28</td>
<td class="third">Email</td>
<td class="fourth">wyz#ymca.com</td>
</tr>
</tbody>
</table>
CSS:
body {
font-family: Arial;
font-size: 12px;
}
table {
border: 1px solid #000;
border-collapse: collapse;
}
.headline {
background-color: #d3d3d3;
font-weight: bold;
padding: 5px;
}
.first,
.third {
font-weight: bold;
padding: 0 5px;
width: 20%;
}
.second,
.fourth {
width: 30%;
}
.third {
border-left: 1px solid #d3d3d3;
}
Demo: http://jsfiddle.net/kZ7Hj/
Wrap each key (Order Id, Date, etc.) in a span with display:inline-block and a width.
Example:
<span style="display:inline-block;width:40%;">Order Id</span>
Edit: Be sure to remove the inline styles when you're done experimenting. It'll make maintenance and debugging a lot easier. Just saw your comment about this being for an email template. I haven't looked at css support in email clients in some time and display:inline-block might not be supported.
I'm not sure if that is what you want but I applied :
<div style="width:200px; display:inline-block;">..</div>
on labels and it seems to be aligned just fine.
Here you can find an example: http://jsfiddle.net/LxD9N/12/
Replace the <span> element with an extra <td> element and align it.