Html 如何从 <td> 表格单元格创建链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3337914/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make a link from a <td> table cell
提问by aeq
I have the following:
我有以下几点：
<td>
some text
<div>a div</div>
</td>
I'd like to make the entire <td>...</td>a hyperlink. I'd prefer without the use of JavaScript. Is this possible?
我想让整个<td>...</td>超链接。我宁愿不使用 JavaScript。这可能吗？
回答by Abel
Yes, that's possible, albeit not literally the <td>, but what's in it. The simple trick is, to make sure that the content extends to the borders of the cell (it won't include the borders itself though).
是的，这是可能的，虽然不是字面上的<td>，但它里面有什么。简单的技巧是，确保内容延伸到单元格的边界（尽管它不会包括边界本身）。
As already explained, this isn't semantically correct. An aelement is an inline element and should not be used as block-level element. However, here's an example (but JavaScript plus a td:hover CSS style will be much neater) that works in most browsers:
如前所述，这在语义上是不正确的。一个a元素是内嵌元件，并且不应该被用作块级元素。但是，这里有一个适用于大多数浏览器的示例（但 JavaScript 加上 td:hover CSS 样式会更简洁）：
<td>
<a href="http://example.com">
<div style="height:100%;width:100%">
hello world
</div>
</a>
</td>
PS: it's actually neater to change ain a block-level element using CSS as explained in another solution in this thread. it won't work well in IE6 though, but that's no news ;)
PS：a正如本线程中的另一个解决方案中所解释的那样，使用 CSS更改块级元素实际上更简洁。虽然它在 IE6 中不能很好地工作，但这不是新闻；)
Alternative (non-advised) solution
替代（非建议）解决方案
If your world is only Internet Explorer (rare, nowadays), you can violate the HTML standard and write this, it will work as expected, but will be highly frowned upon and be considered ill-advised (you haven't heard this from me). Any other browser than IE will not render the link, but will show the table correctly.
如果你的世界只有 Internet Explorer（现在很少见），你可以违反 HTML 标准并编写它，它会按预期工作，但会被高度反对并被认为是不明智的（你没有从我这里听说过这个）。IE 以外的任何其他浏览器都不会呈现链接，但会正确显示表格。
<table>
<tr>
<a href="http://example.com"><td width="200">hello world</td></a>
</tr>
</table>
回答by Uzair Bin Nisar
Use this code. It expands an <a>to fill the cell horizontally. To fill vertically, use the heightproperty as well.
使用此代码。它扩展一个<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>回答by Dustin Laine
I would recommend using an actual anchor element, and set it as block.
我建议使用实际的锚元素，并将其设置为块。
<div class="divBox">
<a href="#">Link</a>
</div>
.divBox
{
width: 300px;
height: 100px;
}
.divBox a
{
width: 100%;
height: 100%;
display: block;
}
This will set the anchor to the same dimensions of the parent div.
这会将锚点设置为与父 div 相同的尺寸。
回答by amp
Here is my solution:
这是我的解决方案：
<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 {
/*...*/
}
}
Like this you can still benefit from some table cell properties like vertical-align.
(Tested on Chrome)
像这样，您仍然可以从一些表格单元格属性中受益，例如vertical-align. （在 Chrome 上测试）
回答by Daddy-o
This might be the most simple way to make a whole <td>cell an active hyperlink just using HTML.
这可能是仅使用 HTML使整个<td>单元格成为活动超链接的最简单方法 。
I never had a satisfactory answer for this question, until about 10 minutes ago, so years in the making #humor.
直到大约 10 分钟前，我才对这个问题有一个满意的答案，这么多年来 #humor。
Tested on Firefox 70, this is a bare-bones example where one full line-width of the cell is active:
在 Firefox 70 上进行了测试，这是一个基本示例，其中单元格的一个完整线宽处于活动状态：
<td><a href=""><div><br /></div></a></td>
<td><a href=""><div><br /></div></a></td>
Obviously the example just links to "this document," so fill in the href=""and replace the <br />with anything appropriate.
显然，该示例只是链接到“此文档”，因此请填写 href=""并替换为 <br />任何适当的内容。
Previously I used a style and class pair that I cobbled together from the answers above (Thanks to you folks.)
以前，我使用了我从上面的答案拼凑而成的样式和类对（感谢你们。）
Today, working on a different issue, I kept stripping it down until <div> </div>was the only thing left, remove the <div></div>and it stops linking beyond the text. I didn't like the short "_" the displayed and found a single <br />works without an "extra line" penalty.
今天，在一个不同的问题上工作，我一直把它拆下来，直到 <div> </div>剩下的唯一东西，删除它 <div></div>，它停止超出文本的链接。我不喜欢显示的短“_”， 并找到了<br />没有“额外行”惩罚的单个作品。
If another <td></td>in the <tr>has multiple lines, and makes the row taller with word-wrap for instance, then use multiple <br />to bring the <td>you want to be active to the correct number of lines and active the full width of each line.
如果另一个 <td></td>中 <tr>有多行，并且例如使用自动换行使行更高，则使用多个 <br />将 <td>您想要激活的行数带到正确的行数并激活每行的全宽。
The only problem is it isn't dynamic, but usually the mouse is closer in height than width, so active everywhere on one line is better than just the width of the text.
唯一的问题是它不是动态的，但通常鼠标的高度比宽度更近，因此在一行上的任何地方都活跃比仅文本的宽度要好。
回答by Sarfraz
I'd like to make the entire td a hyperlink. I'd prefer without javascript. Is this possible?
我想让整个 td 成为一个超链接。我宁愿没有 javascript。这可能吗？
That's not possible without javascript. Also, that won't be semantic markup. You should use link instead otherwise it is a matter of attaching onclickhandler to <td>to redirect to some other page.
没有javascript，这是不可能的。此外，这不会是语义标记。您应该使用链接，否则需要附加onclick处理程序<td>以重定向到其他页面。
回答by RedBelly
You can creat the table you want, save it as an image and then use an image map to creat the link (this way you can put the coords of the hole td to make it in to a link).
您可以创建所需的表格，将其另存为图像，然后使用图像映射创建链接（这样您可以将孔 td 的坐标放入链接中）。
