HTML电子邮件：根据另一个td中的内容调整垂直线高

Question

我想根据<td>标记的内容调整垂直线高度。

<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>

现在我想要的是当第三 <td>的内容发生变化时，根据更改，垂直线的高度和第一<td>的时间应调整为<td>标记的中心。

我希望按照图片输出。

PS：当我制作HTML电子邮件时，我无法使用<div>，位置属性。我必须坚持表和内联css 。

谢谢。

Answer 1

使用padding-top: xx;替换第一个TD中的vertical-align: middle;似乎有效。

<强>拨弄

https://jsfiddle.net/Hastig/j3qy132b/1/

如果它对任何人都有用，我会玩得更远......

https://jsfiddle.net/Hastig/j3qy132b/3/

一个微弱的边框 - 左边而不是boxshadow

https://jsfiddle.net/Hastig/j3qy132b/4/