时间戳

首页 > 解决方案 > 如何在表格的两侧制作带有双线的标题

html - 如何在表格的两侧制作带有双线的标题

问题描述

我已经看到很多关于这个问题的答案，使用相对和绝对定位、使线高非常小等来达到我正在寻找的效果。由于我正在尝试为电子邮件开发相同的东西，所以这并不简单。我可以在标题的任一侧实现一行，但不能实现两行。本质上它看起来像 -----我的标题---- 这是我在任一侧的一行代码

<tr>
    <td valign="top" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; table-layout: fixed; width: 100%; margin: 0 auto; padding-bottom: 20px;">
        <a href="#" style="display: block; word-wrap: break-word; max-width: 100%; text-decoration: none; height: 100%; margin: 0 auto;">
            <div class="header" style="display: table; text-align: center; margin: 0 auto; color: #000000; font-weight: 600; line-height: 130%; letter-spacing: 0.2px; font-size: 18px; width: 100%; max-width: 550px;">
                <span style="display: table-cell; width: 20%; vertical-align: middle; padding-right: 10px;"><hr style="background-color: #000000; height: 3px;" /></span>MY HEADER
                <span style="display: table-cell; width: 20%; vertical-align: middle; padding-left: 10px;"><hr style="height: 3px; background-color: #000000;" /></span>
            </div>
        </a>
    </td>
</tr>

如果没有运行，我可能打错了。但无论哪种方式，在 gmail 中它都呈现得很好。

但是，如何在两边各有两条线呢？我完全不知道如何在电子邮件中执行此操作。任何建议都会很棒 - 谢谢！

标签： htmlcsshtml-email

解决方案

absolute通过使用定位，我能够获得所需的结果。定位的技巧absolute是将父元素设置为position: relative 我另外设置了“我的标题”，span以padding保持水平条在海湾

编辑：我删除了，display: table-cell因为它是不必要的。

这应该工作

<table>
<tbody>
  <tr>
    <td valign="top" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; table-layout: fixed; width: 100%; margin: 0 auto; padding-bottom: 20px;">
        <a href="#" style="display: block; word-wrap: break-word; max-width: 100%; text-decoration: none; height: 100%; margin: 0 auto;">
            <div class="header" style="text-align: center; margin: 0 auto; color: #000000; font-weight: 600; line-height: 130%; letter-spacing: 0.2px; font-size: 18px; width: 100%; max-width: 550px;position: relative;">
                <span style="width: 20%; vertical-align: middle; position: absolute;top: 0;left: -10px;"><hr style="background-color: #000000; height: 3px;" /></span>
               <span style="padding: 0 25px;"> MY HEADER</span>
                <span style="width: 20%; vertical-align: middle; position: absolute;top: 0;right: -10px;"><hr style="height: 3px; background-color: #000000;" /></span>
            </div>
        </a>
    </td>
</tr>
</tbody>
</table>

推荐阅读