如何使 <td> 作为链接可点击（不使用 Javascript）

Question

我正在编写一些用于发送 HTML 电子邮件的代码。由于电子邮件客户端的非标准性质，我仅限于一些非常古老的代码（没有 Javascript、没有 div、没有 CSS 快捷方式等）

号召性用语按钮是 TD，但到目前为止，我还无法使整个按钮可点击；只是中间的文字。

代码类似于

<table width="100%" border="0" cellpadding="0" cellspacing="20">
            <tr>
            <td align="center" valign="middle" width="33%" style="background-color:#6483c1; border:1px solid #44619a; border-radius:2px; padding-top:20px; padding-right:10px; padding-bottom:20px; padding-left:10px;">
            <a href="http://littlehotels.co.uk/travelinsurance.php" target="_blank" style="color:#FFFFFF; text-decoration:none;"><font size="3" face="Arial, Helvetica, sans-serif" color="#ffffff"><b>Travel Insurance</b></font></a>
            </td>

我已经尝试将display:block 添加到 td 样式中，但没有奏效。

我是在尝试做不可能的事吗？

Answer 1

有一种方法，它不正是您所要求的，而是应该给您想要的 - 即使在 Outlook 中！你在正确的轨道上，但 CSS 样式应该在 a 标签上。最好的部分是有一个免费的在线工具可以为您创建代码。

转到buttons.cm，它会创建所需的 html 和 VML，以便在 HTML/CSS 中为您提供完全可点击的按钮，而不仅仅是图像。

添加了buttons.cm的代码输出作为参考，以防它被删除：

<table width="100%" border="0" cellpadding="0" cellspacing="20">
            <tr>
            <td align="center" valign="middle" width="33%"><div><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://littlehotels.co.uk/travelinsurance.php" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="5%" strokecolor="#44619a" fillcolor="#6483c1">
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Travel Insurance</center>
  </v:roundrect>
<![endif]--><a href="http://littlehotels.co.uk/travelinsurance.php"
style="background-color:#6483c1;border:1px solid #44619a;border-radius:2px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Travel Insurance</a></div>
            </td>
            </tr>
            </table>

Answer 2

如果没有 JS，您无法使 <td> 可点击
改为放大内部 <a> 大小 - 以覆盖所需区域，
将 display 设置为 block 可能会有所帮助。

Answer 3

使锚点成为块级元素并将填充从表格单元格移动到锚点：

<table width="100%" border="0" cellpadding="0" cellspacing="20">
  <tr>
    <td align="center" valign="middle" width="33%" style="background-color:#6483c1; border:1px solid #44619a; border-radius:2px;">
      <a href="http://littlehotels.co.uk/travelinsurance.php" target="_blank" style="padding:20px 10px;display:block;color:#FFFFFF; text-decoration:none;"><font size="3" face="Arial, Helvetica, sans-serif" color="#ffffff"><b>Travel Insurance</b></font></a>
    </td>
  </tr>
</table>