html - 电子邮件中的表格可以与另一个表格重叠吗？

Question

我正在使用 HTML 和 CSS 设计一封电子邮件，我希望按钮部分重叠在页脚上。

按钮和页脚位于几个表格、tr 和 td 内。我尝试更改每个外表上的 z 索引，但它似乎根本没有帮助。页脚可以与按钮重叠，但显然这不是目标。

我不是最初编写此部分代码的人，所以如果它很困惑，我很抱歉。我尝试清除一些不必要的样式并复制一些标签。

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

我是否正在寻找一些无法用代码完成的事情？是否有可能使按钮的表格与另一个重叠？我的同事说，如果我无法弄清楚这一点，我可以像普通按钮一样操作，但我还不想放弃。

Answer 1

一种选择是使用 rowspan 将“按钮”跨越两行:

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