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

【问题标题】：How to make a heading with double lines on either side with tables如何在表格的两侧制作带有双线的标题
【发布时间】：2020-10-02 17:56:33
【问题描述】：

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

<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 中它都呈现得很好。

但是如果两边各有两条线，怎么办呢？我完全不知道如何在电子邮件中做到这一点。任何建议都会很棒 - 谢谢！

【问题讨论】：

标签： html css html-email

【解决方案1】：

通过使用absolute 定位，我能够得到想要的结果。 absolute定位的诀窍是将父元素设置为position: relative 我还用padding 在自己的span 中设置了“我的标题”，以防止横杠

编辑：我删除了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>

【讨论】：

这仅适用于 iOS。 Gmail、Outlook、Samsung 等等显示 hr、linebreak、header、linebreak、hr。

【解决方案2】：

您需要使用包含三列的表格。您不能简单地使用 display 更改内容（因此，甚至不要尝试使用带填充的跨度 - 跨度是内联的，而不是阻塞的），也不广泛支持定位。

<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">
            <table width="100%">
                <tr>
                    <td width="20%"><hr style="background-color: #000000; height: 3px;min-width:20px" /></td>
                    <td width="60%"><p style="padding: 0 25px;text-align: center;">MY&nbsp;HEADER</p></td>
                    <td width="20%"><hr style="background-color: #000000; height: 3px;min-width:20px" /></td>
                </tr>
        </table>
    </td>
</tr>
</tbody>
</table>

【讨论】：