Question

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

按钮和页脚位于数个表格（tr和td）中。我尝试过更改每个外部表上的z-index，但是似乎根本没有帮助。页脚可以与按钮重叠，但是显然，这不是目标。

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

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

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>

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

2 个答案: