I've tried the code below to fold on smaller screens and cut signature in half using float:left command on each of but it doesn't work. I need to make this footer as it is on larger screens and fold in half on smaller ones :/
<table style="width: 450px;" width="450" cellspacing="0" cellpadding="0">
<tbody style="vertical-align: top; position: fixed;">
<br></br>
<tr>
<td style="border-bottom: 1px solid; border-bottom-color: #b50015; vertical-align: bottom; font-family: Verdana, sans-serif; color: #3b4908; padding: 0 0 10px 0;" valign="bottom"><strong><span style="font-family: Verdana, sans-serif; font-size: 14pt; color: #b50015;">Natalia Gułaś</span></strong><br /><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #444444;"><span style="font-family: Verdana, sans-serif; color: #2c2c2c;">Dyrektor Zarządzający</span></span></td>
<td style="border-bottom: 1px solid; border-bottom-color: #b50015; vertical-align: top; font-family: Verdana, sans-serif; color: #3b4908; padding: 0 0 10px 0;" valign="top"><img style="width: 179px; height: auto; border: 0;" src="https://lp.gimmik.net/upload/logo.jpg" alt="Logo" width="179" border="0" /></td>
</tr>
<tr>
<td style="width: 60%; line-height: 18px; vertical-align: top; font-family: Verdana, sans-serif; font-size: 10pt; color: #444444; padding: 10px 0 0 0;" valign="top" width="60%"><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;"><strong>tel.:</strong> +48 882 143 502<span><br /></span></span> <span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;"><strong> email:</strong> natalia#gimmik.net </span></td>
<td style="width: 40%; line-height: 18px; vertical-align: top; font-family: Verdana, sans-serif; font-size: 10pt; color: #444444; padding: 10px 0 0 0;" valign="top" width="40%"><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;">Gimmik.net<span><br /></span></span> <span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;">ul. Mełgiewska 9E<span><br /></span></span> <span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;">20-209 Lublin</span></td>
</tr>
<tr>
<td style="width: 60%; vertical-align: top; padding: 10px 0 0 0;" valign="top" width="60%"><span><img style="margin-right: 5px; margin-bottom: 1px; border: 0; width: 16px; height: 16px;" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/plaintext3-with-logo/fb.png" alt="facebook icon" width="16" border="0" /> </span><span><img style="margin-right: 5px; margin-bottom: 1px; border: 0; width: 16px; height: 16px;" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/plaintext3-with-logo/yt.png" alt="youtube icon" width="16" border="0" /> </span><span><img style="margin-right: 5px; margin-bottom: 1px; border: 0; width: 16px; height: 16px;" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/plaintext3-with-logo/it.png" alt="instagram icon" width="16" border="0" /> </span></td>
<td style="width: 40%; vertical-align: top; padding: 10px 0 0 0;" valign="top" width="40%"><span><strong><a style="text-decoration: none;" href="http://www.gimmik.net" target="_blank" rel="noopener"><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #3b4908;"><span style="font-family: Verdana, sans-serif; color: #b50015;">www.gimmik.net</span></span></a></strong></span></td>
</tr>
</tbody>
</table>
To achieve this you need to create two separate tables—one for each side—and float them both. You'll also need to hard-set heights on some cells to keep things aligned.
<table width="225" cellspacing="0" cellpadding="0" style="float:left;">
<tr>
<td style="height: 58px; border-bottom: 1px solid; border-bottom-color: #b50015; vertical-align: bottom; font-family: Verdana, sans-serif; color: #3b4908; padding: 0 0 10px 0;" valign="bottom"><strong><span style="font-family: Verdana, sans-serif; font-size: 14pt; color: #b50015;">Natalia Gułaś</span></strong><br /><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #444444;"><span style="font-family: Verdana, sans-serif; color: #2c2c2c;">Dyrektor Zarządzający</span></span></td>
</tr>
<tr>
<td style="height: 54px; line-height: 18px; vertical-align: top; font-family: Verdana, sans-serif; font-size: 10pt; color: #444444; padding: 10px 0 0 0;" valign="top" width="60%"><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;"><strong>tel.:</strong> +48 882 143 502<span><br /></span></span> <span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;"><strong> email:</strong> natalia#gimmik.net </span></td>
</tr>
<tr>
<td style=" vertical-align: top; padding: 10px 0 0 0;" valign="top" width="60%"><span><img style="margin-right: 5px; margin-bottom: 1px; border: 0; width: 16px; height: 16px;" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/plaintext3-with-logo/fb.png" alt="facebook icon" width="16" border="0" /> </span><span><img style="margin-right: 5px; margin-bottom: 1px; border: 0; width: 16px; height: 16px;" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/plaintext3-with-logo/yt.png" alt="youtube icon" width="16" border="0" /> </span><span><img style="margin-right: 5px; margin-bottom: 1px; border: 0; width: 16px; height: 16px;" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/plaintext3-with-logo/it.png" alt="instagram icon" width="16" border="0" /> </span></td>
</tr>
</table>
<table width="225" cellspacing="0" cellpadding="0" style="float:left;">
<tr>
<td style="height: 58px; border-bottom: 1px solid; border-bottom-color: #b50015; vertical-align: top; font-family: Verdana, sans-serif; color: #3b4908; padding: 0 0 10px 0;" valign="top"> <img style="width: 179px; height: auto; border: 0;" src="https://lp.gimmik.net/upload/logo.jpg" alt="Logo" width="179" border="0" /></td>
</tr>
<tr>
<td style="height: 54px; line-height: 18px; vertical-align: top; font-family: Verdana, sans-serif; font-size: 10pt; color: #444444; padding: 10px 0 0 0;" valign="top"><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;">Gimmik.net<span><br /></span></span> <span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;">ul. Mełgiewska 9E<span><br /></span></span> <span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;">20-209 Lublin</span></td>
</tr>
<tr>
<td style="vertical-align: top; padding: 10px 0 0 0;" valign="top"><span><strong><a style="text-decoration: none;" href="http://www.gimmik.net" target="_blank" rel="noopener"><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #3b4908;"><span style="font-family: Verdana, sans-serif; color: #b50015;">www.gimmik.net</span></span></a></strong></span></td>
</tr>
</table>
Related
html siganture keeps cutting off
I have 0 html experience but can edit code if its straightforward enough.
The top of my logo/social media icons keeps cutting off on outlook. They don't cut off when I open the email in a browser or through a mobile device. Is there a way to edit the code so that it doesn't cut off? I tried adding padding to the top but it doesn't work. Please help.
Code
<table width="335" cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;"> <tr> <td style="padding-top: 0; padding-bottom: 0; padding-left: 0px; padding-right: 0;"> <table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;"> <tr> <td colspan="2" style="padding-bottom: 2px; color: #515151; font-size: 15px; font-family: Arial, Helvetica, sans-serif;line-height:15px;"> <b>Ryan Milliman </b> </td> </tr> <tr> <td colspan="2" style="padding-bottom: 6px; color: #515151; font-size: 14px; font-family: Arial, Helvetica, sans-serif;line-height:15px;"> <b> <small style="color:#515151;" >Director of Investor Relations</small></b> </td> </tr> <tr> <td colspan="2" style="color: #333333; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:6px;line-height:0px;"> <img src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/border.png" width="333" height="3" alt="" /> </td> </tr> <tr> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:4px;line-height:15px;"> <b style="color:#9d1924;" >O:</b> (800) 735- 9973 </td> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:4px;line-height:15px;"> <b style="color:#9d1924;">M:</b> (760) 793- 2933 </td> </tr> <tr> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:4px;line-height:15px;"> <b style="color:#9d1924;" >W:</b> www.primior.com </td> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:4px;line-height:15px;"> <b style="color:#9d1924;">E:</b> ryan.milliman#primior.com </td> </tr> <tr> <td colspan="2" style="color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:6px;"> <b style="color:#9d1924;">A:</b> <img src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/border.png" width="333" height="3" alt="" /> </td> </tr> <tr> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:7px; padding-top:7px;line-height:15px;"> <a href="http://www.primior.com"> <img src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/logo.png" width="155" height="20" alt="" /> </td> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:7px;padding-top:7px;line-height:15px;text-align:right;"> <img width="20" height="20" style="border: none; width: 20px; max-width: 20px !important; height: 20px; max-height: 20px !important;vertical-align:middle;" src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/fb.png"> <img width="20" height="20" style="border: none; width: 20px; max-width: 20px !important; height: 20px; max-height: 20px !important;vertical-align:middle;" src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/tw.png"> <img width="20" height="20" style="border: none; width: 20px; max-width: 20px !important; height: 20px; max-height: 20px !important;vertical-align:middle;" src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/lin.png"> <img width="20" height="20" style="border: none; width: 20px; max-width: 20px !important; height: 20px; max-height: 20px !important;vertical-align:middle;" src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/ins.png"> </td> </tr> </table> </td> </tr> </table>
Outlook sometimes ignores the width/height of an element.
Try adding width and height to your td where the Image is located.
This button displays fine on all email clients that I've tested except for out look
I am struggling to put space between the icon and text with a border in between. the only way I have been able to get the height of the text and image to be the same is to put them in the same tag.
i've tried and and between image and text and setting widths to them which hasn't changed anything
Has someone got a better way to do this? Currently in outlook there is no space between the text and icon. Image attached of desired result
<tr>
<td width="auto" align="center">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="auto" align="center" width="20px" height="15px" style="color:#ffffff; text-decoration:none; font-weight: 700; font-family: Helvetica, Arial, sans-serif, 'Montserrat'; font-size: 12px; line-height: 36px; letter-spacing: .1em; vertical-align:middle; text-transform: uppercase;">
<div width="20px" height="15px" style="border-right: solid 1px #414141;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="www.google.com" style="height:50px; v-text-anchor:middle; width:250px;" arcsize="0%" strokecolor="#111111" fillcolor="#111111">
<w:anchorlock/>
<center style="color:#ffffff; font-family:Helvetica, Arial, sans-serif, 'Montserrat'; font-size:font-size"12px; display: table; border="0"><img src="img/right-arrow-white.png" alt="" border="0" border-right: 1px solid grey; width="17" height="11" style="display: block;"> VIEW OUR PROJECTS</center>
</v:roundrect>
<![endif]-->
<a href="www.google.com" style="display:inline-block; color:#ffffff; background-color: #111111; text-decoration:none; font-weight: 400; font-family: Helvetica, Arial, sans-serif, 'Montserrat'; font-size: 12px; line-height: 50px; letter-spacing: .1em; vertical-align:middle; height: 50px; width: 58px; mso-hide:all">
<img src="img/right-arrow-white.png" width="17px" height="11px" alt="go to link"/>
</a>
</div>
</td>
<td width="auto" align="center" style="color:#ffffff; text-decoration:none; font-weight: 400; font-family: Helvetica, Arial, sans-serif, 'Montserrat'; font-size: 12px; line-height: 15px; letter-spacing: .1em; vertical-align:middle; text-transform: uppercase; ">
<div>
<a href="www.google.com" style="display:inline-block; color:#ffffff; background-color: #111111; text-decoration:none; font-weight: 400; font-family: Helvetica, Arial, sans-serif, 'Montserrat'; font-size: 12px; line-height: 50px; letter-spacing: .1em; vertical-align:middle; height: 50px; width: 200px; white-space: nowrap;
mso-hide:all;">
View our projects
</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="auto" align="center">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="auto" align="center" width="20px" height="15px" style="color:#ffffff; text-decoration:none; font-weight: 700; font-family: Helvetica, Arial, sans-serif, 'Montserrat'; font-size: 12px; line-height: 36px; letter-spacing: .1em; vertical-align:middle; text-transform: uppercase;">
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="www.google.com.au" style="height:50px; v-text-anchor:middle; width:50px;" arcsize="0%" strokecolor="#111111" fillcolor="#111111">
<w:anchorlock/>
<center style="color:#ffffff; font-family:Helvetica, Arial, sans-serif, 'Montserrat'; font-size:font-size"12px; vertical-align: middle;"><img src="img/right-arrow-white.png" alt="arrow icon" border-right: 1px solid grey; width="17" height="11" style="display: block;"></center>
</v:roundrect>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="www.google.com.au" style="height:50px; v-text-anchor:middle; width:200px;" arcsize="0%" strokecolor="#111111" fillcolor="#111111">
<w:anchorlock/>
<center style="color:#ffffff; font-family:Helvetica, Arial, sans-serif, 'Montserrat'; font-size:font-size"12px;>VIEW OUR PROJECTS</center>
</v:roundrect>
<![endif]-->
<a href="www.google.com" style="display:inline-block; color:#ffffff; background-color: #111111; text-decoration:none; font-weight: 400; font-family: Helvetica, Arial, sans-serif, 'Montserrat'; font-size: 12px; line-height: 50px; letter-spacing: .1em; vertical-align:middle; height: 50px; width: 58px; mso-hide:all">
<img src="img/right-arrow-white.png" width="17px" height="11px" alt="go to link"/>
</a>
</div>
</td>
<td width="auto" align="center" style="color:#ffffff; text-decoration:none; font-weight: 400; font-family: Helvetica, Arial, sans-serif, 'Montserrat'; font-size: 12px; line-height: 15px; letter-spacing: .1em; vertical-align:middle; text-transform: uppercase; ">
<div>
<a href="www.google.com" style="display:inline-block; color:#f8f8f8; background-color: #111111; text-decoration:none; font-weight: 400; font-family: Helvetica, Arial, sans-serif, 'Montserrat'; font-size: 12px; line-height: 50px; letter-spacing: .1em; vertical-align:middle; height: 50px; width: 200px; white-space: nowrap;
mso-hide:all;">
View our projects
</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
I have made an email signature to be used for outlook, but when it is sent in the email, the format is changing. The spaces between each section increase. How do I code this to ensure that the format does not change?
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<table class="container" style="margin:0;background:#fff;border-collapse:collapse;border-spacing:0;margin:0;padding:0;text-align:inherit;width:580px; box-style: borderbox; position: relative;">
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;">
<p style=" color: #00b3b3; font-family: 'Arial', sans-serif; font-size: 12pt; font-weight: bold; padding: 0;">Delia Bellaby</p>
</td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;"><img src="https://s19.postimg.org/95hmbn6ar/design_Make_Logo.jpg"></td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;"><p style="color: #00b3b3; font-family: 'Arial', sans-serif; font-size: 12pt; font-weight: bold">Architect</p></td>
</tr>
<tr>
<td><p style="color: #9C9E9E; font-family: 'Arial', sans-serif; font-size: 10pt; font-weight: bold; margin-top: 10px;">Mobile: 022 362 6916 </p></td>
</tr>
<tr>
<td><p style="text-align: left; color: #9C9E9E; font-family: 'Arial', sans-serif; font-size: 10pt; border-top: 2px solid #00b3b3; padding-top: 10px; "><strong style="color:#00b3b3;">website:</strong> http://www.designmake.co.nz<br><strong style="color:#00b3b3;">email:</strong> delia#designmake.co.nz</p></td>
</tr>
<tr>
<td>
<span style="text-align: left; color: #00b3b3; font-family: 'Arial', sans-serif; font-size: 10pt; ">
<img style="color: #3399ff; height: 30px; width: 30px;" src="https://s19.postimg.org/6begy7bub/Facebook-_Home-_Logo.png"></span>
</td>
</tr>
</table>
</body>
</html>
I have an email signature which consists of a simple table (one row, two columns). The first column has a logo, the second column has all the contact details.
I would like to make it responsive so that on small devices the logo is shown above, and the contact details below (so effectively the columns turn into rows). Currently, on small devices, the table gets squeezed so that the contact details are not readable.
<div style="color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<div class="m_159975109461180827gmail_signature">
<div dir="ltr">
<div dir="ltr">
<table style="color: #000000; font-family: 'Times New Roman'; font-size: medium; background: none; margin: 0px; padding: 0px; border: 0px initial initial;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: arial, sans-serif; margin: 0px; border-top: 0px; border-right-width: 3px; border-right-color: #d2ac67; padding: 0px 7px 0px 0px; vertical-align: middle;" valign="top"><img class="CToWUd" src="http://mywebsite.com/logo-small.png" alt="" /></td>
<td style="font-family: arial, sans-serif; margin: 0px; padding: 0px 0px 0px 12px;">
<table style="background: none; margin: 0px; padding: 0px; height: 93px; border: 0px initial initial;" border="0" width="300" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; padding-bottom: 5px; color: #d2ac67; font-size: 14px;" colspan="2"><strong>My Name</strong></td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; color: #333333; font-size: 12px;" colspan="2"><span style="color: #d2ac67;">My position • Name of the company</span></td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; width: 20px; color: #d2ac67; font-size: 12px;" valign="top" width="20">p:</td>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; color: #333333; font-size: 12px;" valign="top"><a style="color: #1155cc;" href="tel:+44%2020%207099%206646" target="_blank">+44 1234566</a> <span style="color: #d2ac67;">m: </span><a style="color: #1155cc;" href="tel:+44%207491%20044801" target="_blank">+44 1</a>234567</td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; width: 20px; color: #d2ac67; font-size: 12px;" valign="top" width="20">a:</td>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; color: #333333; font-size: 12px;" valign="top">some addresss</td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; width: 20px; color: #d2ac67; font-size: 12px;" valign="top" width="20">w:</td>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; color: #333333; font-size: 12px;" valign="top">link to the website</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Thank you all in advance for your help/guidance.
If you want to use a table create another table with your rows as columns and assign each table a class. Use css to hide and show the different tables using media calls.
I want to adjust vertical line height as per the content of <td> tag.
<table class="bg-color1" style="background-color:#ffffff;border:none;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; " align="center" border="0" cellpadding="0" cellspacing="0" width="600" >
<tbody>
<tr>
<td width="28%" valign="top" style=" border: none;mso-table-rspace: 0pt; mso-table-lspace:0pt; border-collapse: collapse; text-transform: uppercase; font-family: 'open sans', arial, sans-serif; font-weight: 500; font-size: 18px; letter-spacing: 0px; padding-top: 20px; padding-left:70px; text-align: center; ">
<span style="text-align: center">8:30 - 9:30</span>
</td>
<td width="7%" valign="top" style=";mso-table-rspace: 0pt; mso-table-lspace:0pt; border-collapse: collapse; text-transform: uppercase; font-family: 'open sans', arial, sans-serif; font-weight: 500; font-size: 18px; letter-spacing: 0px; padding-left: 70px; padding-top: 10px; ">
<hr style="height: 20px;">
</td>
<td width="65%" style="mso-table-rspace: 0pt; mso-table-lspace:0pt; border-collapse: collapse; text-transform: uppercase; font-family: 'open sans', arial, sans-serif; font-weight: 500; font-size: 15px; letter-spacing: 0px; padding-left: 10px; padding-top: 10px; text-transform: uppercase; text-align: left; ">
Tea, Registration, Networking
</td>
</tr>
<tr style="border: thin black solid;">
<td width="28%" valign="top" style=" border: none;mso-table-rspace: 0pt; mso-table-lspace:0pt; border-collapse: collapse; text-transform: uppercase; font-family: 'open sans', arial, sans-serif; font-weight: 500; font-size: 18px; letter-spacing: 0px; padding-top: 20px; padding-left:70px; text-align: center; ">
<span style="text-align: center">8:30 - 9:30</span>
</td>
<td width="7%" valign="top" style=";mso-table-rspace: 0pt; mso-table-lspace:0pt; border-collapse: collapse; text-transform: uppercase; font-family: 'open sans', arial, sans-serif; font-weight: 500; font-size: 18px; letter-spacing: 0px; padding-left: 70px; padding-top: 10px; ">
<hr style="height: 20px;">
</td>
<td width="65%" valign="top" style="mso-table-rspace: 0pt; mso-table-lspace:0pt; border-collapse: collapse; text-transform: uppercase; font-family: 'open sans', arial, sans-serif; font-weight: 500; font-size: 15px; letter-spacing: 0px; padding-left: 10px; padding-top: 10px; text-transform: uppercase; text-align: left; ">
Tea, Registration, Networking
Tea, Registration, Networking
Tea, Registration, Networking
</td>
</tr>
</tbody>
<tr>
<td height="40"></td>
</tr>
</table>
Now What I want is when the content of third <td> changes then as per the changes the height of vertical line and the time of 1st <td> should be adjusted to center of the <td> tag.
I want output as per the image.
PS : As I am making HTML Email , I can't use <div> , position property. I have to stick to table and inline css only.
Thank You.
Replacing padding-top: xx; in the first TD's with vertical-align: middle; seems to work.
fiddle
https://jsfiddle.net/Hastig/j3qy132b/1/
I played around a bit further, if it's of use to anyone..
https://jsfiddle.net/Hastig/j3qy132b/3/
A faint border-left instead of boxshadow
https://jsfiddle.net/Hastig/j3qy132b/4/