css 通过锚标记使整个< td>内容可单击

mwkjh3gx 于 2022-12-05 发布在其他

关注(0)|答案(5)|浏览(163)

在为Outlook创建HTML电子邮件时，我偶然发现了一个我一直无法修复的小问题。
下面是一个html表格的屏幕截图。我需要使整个区域都可点击，而不仅仅是文本。当我把<a href="#">放在<td>或<table>周围时，它在浏览器中工作，但在Outlook中不工作。

代码如下：

<table border="0" cellpadding="0" cellspacing="0" style="border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;background-color: #2FBA45;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
    <tbody>
        <tr>
            <td align="center" valign="middle" style="font-family: Arial;font-size: 22px;padding: 15px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                <a href="#" title="Yes please, send me a quote." target="_self" style="font-weight: bold;letter-spacing: -0.5px;line-height: 100%;text-align: center;text-decoration: none;color: #FFFFFF;word-wrap: break-word !important; display:block; width:100%; height:100%">Yes please, send me a quote.</a>
            </td>
        </tr>
    </tbody>
</table>

css

来源：https://stackoverflow.com/questions/17832308/making-whole-td-clickable-through-anchor-tag

5条答案

按热度按时间

ut6juiuv1#

我知道这是一个老问题，但我一直在寻找这个问题的答案（在Outlook中可点击的整个按钮），并偶然发现了以下解决方案：

<table border="0" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td align="center" valign="middle" >

<!-- start of Outlook compatible button generated by http://buttons.cm/ -->
<div><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://yoururlhere.com/" style="height:52px;v-text-anchor:middle;width:330px;" arcsize="10%" stroke="f" fillcolor="#2fba45">
    <w:anchorlock/>
    <center>
  <![endif]-->
      <a href="http://yoururlhere.com/"
style="background-color:#2fba45;border-radius:5px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:52px;text-align:center;text-decoration:none;width:330px;-webkit-text-size-adjust:none;">Yes please, send me a quote.</a>
  <!--[if mso]>
    </center>
  </v:roundrect>
<![endif]--></div>
<!-- end of Outlook compatible button generated by http://buttons.cm/ -->

            </td>
        </tr>
    </tbody>
</table>

注意我没有测试过上面的代码。
其他答案确实链接到了campaignmonitor网站，但没有this link which provided the solution。
campaignmonitor的那篇博文提到，他们已经基于Stig M（twitter上的@stigm）创建的解决方案创建了一个specific website to generate outlook compatible clickable buttons - http://buttons.cm。
我不为竞选监视器工作。
希望这能帮到你。

赞(0）回复(0）举报 2022-12-05

qf9go6mv2#

试试这个
http://jsfiddle.net/KrRzP/

<table border="0" cellpadding="0" cellspacing="0"   style="border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;background-color: #2FBA45;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; cursor:pointer;">
    <tbody>                 
        <tr>
            <td align="center" valign="middle"  style="font-family: Arial;font-size: 22px;padding: 15px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                <a  href="http://www.example.org" title="Yes please, send me a quote."  target="_self" style="font-weight: bold;letter-spacing: -0.5px;line-height: 100%;text-align: center;text-decoration: none;color: #FFFFFF;word-wrap: break-word !important; display:block; width:100%; height:100%">Yes please, send me a quote.</a>
            </td>  
        </tr>
    </tbody>
</table>

赞(0）回复(0）举报 2022-12-05

d5vmydt93#

您可以尝试使用onClick，<td onClick="go to anchor">。在内联样式中，您应该添加cursor: pointer，以便将光标更改为“悬停链接”指针。

赞(0）回复(0）举报 2022-12-05

yuvru6vn4#

尝试删除target="_self"。由于Outlook是电子邮件客户端，因此可能无法识别它，并可能导致此问题。
顺便说一句，如果你在邮件中使用锚链接（链接到同一页面的其他地方），这并不是所有的邮件浏览器都完全支持的。

赞(0）回复(0）举报 2022-12-05

wmvff8tz5#

使用JavaScript“innerHTML”属性。默认情况下，在HTML5中，不能直接在表格单元格元素中添加锚标记。

<html>
<title>
</title>
<head>
</head>
<body>

    <table>
        <thead>
             <tr>
                 <td>Youtube</td>
                 <td id="assign_anchor_tag_here"></td>
            </tr>
        <thead>
    </table>

<script>
    var td_element = document.getElementById("assign_anchor_tag_here");
    td_element.innerHTML = "<a href='https://www.youtube.com'>Click Here!</a>";
</script>

赞(0）回复(0）举报 2022-12-05

我来回答

css 通过锚标记使整个< td>内容可单击

5条答案

相关问题

热门标签

最新问答