HTML 电子邮件 : adjust vertical line height according to the content in another 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>

现在我想要的是third的内容<td>然后根据垂直线的高度和第一个<td>的时间的变化而变化应调整到 <td> 的中心标签。

我想要按照图像输出。

PS : 因为我正在制作 HTML 电子邮件，我不能使用 <div> , 位置 属性。我必须只坚持使用 table 和 inline css。

谢谢。

Answer 1

将第一个 TD 中的 padding-top: xx; 替换为 vertical-align: middle; 似乎可行。

fiddle

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

如果对任何人有用的话，我玩得更远了..

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

淡淡的左边框而不是框阴影

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