【发布时间】：2011-03-21 06:09:29
【问题描述】：
我有以下几点：
<td>
some text
<div>a div</div>
</td>
我想让整个<td>...</td> 成为一个超链接。我宁愿不使用 JavaScript。这可能吗？
【问题讨论】：
-
这能回答你的问题吗？ How to make entire td a link?
【发布时间】：2011-03-21 06:09:29
【问题描述】：
我想让整个 td 超链接。我宁愿没有 javascript。这可能吗？
如果没有 javascript，这是不可能的。此外，这不会是语义标记。您应该改用链接，否则只需将onclick 处理程序附加到<td> 即可重定向到其他页面。
【讨论】：
-
其实不用javascript也是可以的。在此线程中查看其他答案。
我建议使用实际的锚元素，并将其设置为块。
<div class="divBox">
<a href="#">Link</a>
</div>
.divBox
{
width: 300px;
height: 100px;
}
.divBox a
{
width: 100%;
height: 100%;
display: block;
}
这会将锚点设置为与父 div 相同的尺寸。
【讨论】：
是的，这是可能的，尽管不是字面意义上的<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 将 a 更改为块级元素中的 explained in another solution in this thread 实际上更简洁。虽然它在 IE6 中不能很好地工作，但这不是新闻；）
替代（非建议）解决方案
如果你的世界只有 Internet Explorer（现在很少见），你可以违反 HTML 标准并编写它，它会按预期工作，但会被高度反对并被认为是不明智的（你没听说过这是我的）。 IE 以外的任何其他浏览器都不会呈现链接，但会正确显示表格。
<table>
<tr>
<a href="http://example.com"><td width="200">hello world</td></a>
</tr>
</table>
【讨论】：
-
如果 td 有填充，则您的第一个建议解决方案不起作用，因为 div 只会在填充允许的范围内扩展
-
@max：虽然我很久以前写过这篇文章，但我想说填充是
td的一部分。如果要将其添加到超链接区域，则应删除填充。另一种解决方法是添加一个 JS sn-p 并将悬停光标更改为pointer，这增加了可用性并且不妨碍搜索机器人的索引。 -
用 0 覆盖 td 的填充并相应地设置内部 div 的填充是唯一对我有用的解决方案，但我真的不满意。如果有人找到更优雅的方式，请更新。
-
有一个更正确的答案：
一些文字 -
@jp，这与将其设为“链接”不同。你让它可点击并运行一个改变位置的javascript，使用
a使它成为一个实际的链接，在语义上和词法上。
使用此代码。它扩展<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>【讨论】：
-
这似乎是最简单的解决方案。请注意，如果 TD 有填充，则该区域是不可点击的。设置填充：0；在 TD 和 padding 上：3px； （或其他）在 A 上。此外，A 的宽度和高度必须是自动的，而不是 100%。
-
对于 Chrome 中的文本链接，我必须在 td a 的 CSS 中添加 line-height 属性。我将其设置为容器的全高。它只适用于单线。
这是我的解决方案：
<td>
<a href="/yourURL"></a>
<div class="item-container">
<img class="icon" src="/iconURL" />
<p class="name">
SomeText
</p>
</div>
</td>
（少）
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 上测试）
【讨论】：
您可以创建您想要的表格，将其保存为图像，然后使用图像映射来创建链接（这样您可以将孔 td 的坐标放入链接中）。
【讨论】：
-
虽然最终结果可能会奏效，但这是一种相当复杂且非常糟糕的实现方式。当图像宽度可能随屏幕大小而变化时，它也会中断。
这可能是让整个 <td> 单元格成为活动超链接的最简单方法只需使用 HTML。
直到大约 10 分钟前，我对这个问题从未有过令人满意的答案，所以 #humor 已经酝酿多年了。
在 Firefox 70 上测试，这是一个简单的示例，其中单元格的一个完整行宽处于活动状态：
<td><a href=""><div><br /></div></a></td>
显然该示例只是链接到“此文档”，因此请填写href="" 并将<br /> 替换为任何适当的内容。
之前我使用了我从上面的答案拼凑而成的风格和班级对（感谢你们。）
今天，在处理一个不同的问题时，我一直在删除它，直到 <div>&nbsp;</div> 是唯一剩下的东西，删除 <div></div> 并且它停止链接到文本之外。我不喜欢 &nbsp; 显示的短“_”，发现单个 <br /> 没有“额外行”惩罚。
如果<tr> 中的另一个<td></td> 有多行，并且例如使用自动换行使行更高，则使用多个<br /> 将您想要激活的<td> 带到正确的数字行数并激活每行的全宽。
唯一的问题是它不是动态的，但通常鼠标的高度比宽度更接近，因此在一行的任何地方都处于活动状态比仅是文本的宽度更好。
【讨论】：
不幸的是，<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 td */
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)
【讨论】：