Question

我有以下内容：

<td>
  some text
  <div>a div</div>
</td>

我想让整个<td>...</td>成为超链接。我更喜欢不使用JavaScript。这可能吗？

Answer 1

是的，这是可能的，虽然不是字面上的<td>，但它有什么。简单的诀窍是，确保内容扩展到单元格的边界（虽然它不会包含边框本身）。

如前所述，这在语义上并不正确。 a元素是内联元素，不应用作块级元素。但是，这是一个例子（但JavaScript加上td：hover CSS样式将更加整洁），适用于大多数浏览器：

<td>
  <a href="http://example.com">
    <div style="height:100%;width:100%">
      hello world
    </div>
  </a>
</td>

PS：使用CSS作为explained in another solution in this thread，在块级元素中更改a实际上更简洁。但它在IE6中效果不佳，但这不是新闻;）

替代（非建议）解决方案

如果您的世界只是Internet Explorer（现在很少见），您可以违反HTML标准并写下来，它会按预期工作，但会非常不受欢迎并被视为不明智（您还没有听说过）这来自我）。除IE之外的任何其他浏览器都不会呈现链接，但会正确显示该表。

<table>
    <tr>
        <a href="http://example.com"><td  width="200">hello world</td></a>
    </tr>
</table>

Answer 2

使用此代码。它会扩展<a>以水平填充单元格。要垂直填充，也请使用height属性。

td a {
  width: 100%;
  display: block;
}

td {
  /* Cell styles for demonstration purposes only */
  border: 1px solid black;
  width: 10em;
}

<table><tr>
  <td>
    <a href="http://example.com">
      Hello World
    </a>
  </td>
</tr></table>

Answer 3

我建议使用实际的锚元素，并将其设置为块。

<div class="divBox">
    <a href="#">Link</a>
</div>

.divBox
{
    width: 300px;
    height: 100px;
}
.divBox a
{
    width: 100%;
    height: 100%;
    display: block;
}

这会将锚点设置为父div的相同尺寸。

Answer 4

这是我的解决方案：

<td>
   <a href="/yourURL"></a>
   <div class="item-container">
      <img class="icon" src="/iconURL" />
      <p class="name">
         SomeText
      </p>
   </div>
</td>

（LESS）

td {
  padding: 1%;
  vertical-align: bottom;
  position:relative;

     a {
        height: 100%;
        display: block;
        position: absolute;
        top:0;
        bottom:0;
        right:0;
        left:0;
       }

     .item-container {
         /*...*/
     }
}

像这样，你仍然可以从像vertical-align这样的表格单元属性中受益。（在Chrome上测试）

Answer 5

我想把整个td变成一个超链接。我不喜欢 JavaScript的。这可能吗？

没有javascript就不可能。此外，这不是语义标记。您应该使用链接，否则将onclick处理程序附加到<td>以重定向到其他页面。

Answer 6

这可能是使整个<td>单元格成为活动超链接的最简单方法 仅使用HTML。

直到大约10分钟前，我才对这个问题没有满意的答案。

这是在Firefox 70上进行的测试，这是一个简单的示例，其中单元格的一个完整线宽处于活动状态：

<td><a href=""><div><br /></div></a></td>

显然，该示例只是链接到“此文档”，因此请填写href=""并用适当的内容替换<br />。

以前，我使用上面答案中的样式和类对拼凑而成（谢谢大家。）

今天，在处理另一个问题时，我一直将其剥离，直到剩下<div> </div>为止，然后删除<div></div>，它停止链接并超出文本。我不喜欢显示 的简短“ _”，发现单个<br />的作品不会受到“额外的限制”。

如果<td></td>中的另一个<tr>有多行，并且例如通过自动换行使行高，则使用多个<br />将<td>带到希望激活到正确的行数并激活每行的整个宽度。

唯一的问题是它不是动态的，但是通常鼠标的高度比宽度更近，因此在一行上的任何地方都比文本的宽度更好。

Answer 7

不幸的是，<td><a></a></td> 方法使 <td> 的单元格填充无法点击。

此方法使整个 TD 可点击，一直到边框。

结合一些评论者的建议，

您将 <td> 的填充设置为 0，然后
嵌入一个 <a> 封闭的 <div> 和所需的单元格填充。因此填充是 <a href> 的一部分。

像这样：

HTML：

<td class="fulltd">
    <a class="fulltd" href="https://soundcloud.com/demis-john">
    <div class="fulltd">
        Link To Soundcloud
    </div>
    </a>
</td>

CSS：

/* Remove <td>'s interior cell-padding */
td.fulltd {
    padding: 0em 0em 0em 0em;
}

/* Make the <a> fill the whole div */
td a.fulltd {
    display: block;
    width: 100%;
    height: 100%;
}

/* Let the <div> provide the clickable cell-padding */
div.fulltd {
    height:100%;
    width:100%;
    padding: 1.0em 1.0em 1.0em 1.0em;
}

（感谢这些评论者帮助我最终解决了这个问题！ Per Lindberg、Max)

Answer 8

您可以创建所需的表格，将其另存为图像，然后使用图像地图创建链接（这样您就可以将孔洞的坐标设置为链接）。

如何从表格单元格建立链接

8 个答案:

替代（非建议）解决方案