user123 user123 - 3 months ago 13
CSS Question

HTML Email : adjust vertical line height according to the content in another td

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.

here it the image

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.

Answer

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/

Comments