table 可以在电子邮件中与另一个 table 重叠吗？

Question

我正在设计带有 HTML 和 CSS 的电子邮件，我希望按钮部分重叠在页脚上。

按钮和页脚在 table、tr 和 td 之间。我试过更改每个外部 table 上的 z-index，但它似乎根本没有帮助。页脚可以与按钮重叠，但显然，这不是目标。

我不是最初编写此部分代码的人，所以如果它一团糟，我会 sorry.I 尝试清除一些不必要的样式并复制一些标签。

<table border="0" align="center" cellpadding="0" cellspacing="0" width="100%" style="background-color: #F8F9FA; z-index: 20; margin:0 auto;">
  <tr>
    <td>
      <tbody>
        <tr>
          <td align="center">
            <table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto; z-index: 20;">
              <tr>
                <td align="center" bgcolor="#ffcc04" width="250" style="padding: 10px;">
                  <a href="https://www.pcci.edu/collegedays/" style="padding: 10px;width:250px;display: block;
text-decoration: none;border:0; text-align: center;font-weight: bold; font-size: 15px;
font-family: sans-serif; color: #00568d; background: #ffcc04; line-height:17px; 
text-transform: uppercase;" class="button_link">See College Days Details </a>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </tbody>
    </td>
  </tr>
</table>

<table width="100%" class="Wrapper" cellpadding="0" cellspacing="0" border="0" style="background-color:#f2f2f2; z-index: 10;">
  <tr>
    <td align="center" style="background-color:transparent;
padding: 0px 0px 0px 0px; border-top-style: none; border-bottom-style: none; border-right-style: none;
border-left-style: none; border-top-width: 0px; border-bottom-width: 0px; border-right-width: 0px;
border-left-width: 0px; border-color: #00568d; margin-bottom: 40px;">
      <!--[if(gte mso 9)|(IE)]><table width="600" cellpadding="0" cellspacing="0" border="0"
style="width: 600px;"><tr><td align="center"><![endif]-->

      <table width="100%" class="Container" cellpadding="0" cellspacing="0" border="0" style="max-width:600px; z-index:10;">
        <tr>
          <td align="center" style="background-color: #00568d">
            <table width="100%" class="Column-1" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td align="center">
                  <table width="100%" cellpadding="0" cellspacing="0" border="0">
                    <tr class="text">
                      <td>
                        <p>...</p>
                        <p>...</p>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>

      <!--[if(gte mso 9)|(IE)]></td></tr></table><![endif]-->
    </td>
  </tr>
</table>

我是在寻找代码无法完成的事情吗？甚至可以让按钮的 table 与另一个重叠吗？我的同事说如果我搞不定，我可以像我们的普通按钮一样做，但我还不想放弃。

Answer 1

一个选项是使用 rowspan:

将 "button" 跨越两行

<table width="100% border="0" cellpadding="0" cellspacing="0" style="margin:0 auto; z-index: 20;">
    <tr>
        <td>&nbsp;</td>
        <td rowspan="2" align="center" bgcolor="#ffcc04" width="250" style="padding: 10px;">
            <a href="https://www.pcci.edu/collegedays/" style="padding: 10px;width:250px;display: block;
text-decoration: none;border:0; text-align: center;font-weight: bold; font-size: 15px;
font-family: sans-serif; color: #00568d; background: #ffcc04; line-height:17px; 
text-transform: uppercase;" class="button_link">See College Days Details </a>
        </td>
        <td>&nbsp;</td>
    </tr>
    <tr><td bgcolor="#00568d">&nbsp;</td><td bgcolor="#00568d">&nbsp;</td></tr>

    <tr bgcolor="#00568d">
        <td colspan="3">&nbsp;</td>
    </tr>

    <tr bgcolor="#00568d">
        <td colspan="3" align="center">
            (c) Copyright Pensacola Christian College...
        </td>
</tr>
</table>

Answer 2

我知道这个问题已经得到解答，但这里是没有 colspan 的方法，在少数情况下和一些电子邮件客户端没有很好的支持。

这样做的好处是您有一个防弹按钮，它将以相同的方式在所有电子邮件客户端上工作（并且整个按钮都是可点击的）。它也是可维护的，这意味着如果你错误地删除了一个列，colspan 不会在电子邮件客户端中造成混乱。

<table width="600" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td width="33%" align="left" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
                  <tbody>
                    <tr>
                      <td align="left" valign="top" bgcolor="#F8F9FA" style="height: 25px;">&zwnj;</td>
                    </tr>
                    <tr>
                      <td align="left" valign="top" bgcolor="#00568d" style="height: 25px;">&zwnj;</td>
                    </tr>
                  </tbody>
                </table></td>
              <td align="left" valign="top" bgcolor="#00568d">
                  
              <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
                  <tr>
                    <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #ffcc04; border-radius: 0px; text-align: center;" valign="top" bgcolor="#ffcc04" align="center"><a href="" target="_blank" style="display: inline-block; color: #00568d; background-color: #ffcc04; border: solid 1px #ffcc04; border-radius: 0px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 45px; text-transform: capitalize; border-color: #ffcc04;">Take action now</a></td>
                  </tr>
                </table></td>
              <td width="33%" align="left" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tbody>
                  <tr>
                    <td align="left" valign="top" bgcolor="#F8F9FA" style="height: 25px;">&zwnj;</td>
                  </tr>
                  <tr>
                    <td align="left" valign="top" bgcolor="#00568d" style="height: 25px;">&zwnj;</td>
                  </tr>
                </tbody>
              </table></td>
            </tr>
          </tbody>
        </table></td>
    </tr>
    <tr>
      <td>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td bgcolor="#00568d" style="color:#ffffff;padding:0px 20px 20px 20px;">Footer</td>
            </tr>
          </tbody>
        </table>
        </td>
    </tr>
  </tbody>
</table>

table 可以在电子邮件中与另一个 table 重叠吗？

Can a table overlap another table in an email?

html

css

html-email