Html 如何制作表格超链接的单元格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10070232/
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 to make a cell of table hyperlink
提问by vaichidrewar
How can entire table cell be hyperlinked in html without javascript or jquery?
如何在没有 javascript 或 jquery 的情况下在 html 中超链接整个表格单元格？
I tried to put href in td tag itself but its not working at least in chrome 18
我试图将 href 放在 td 标签本身中，但它至少在 chrome 18 中不起作用
<td href='http://www.m-w.com/dictionary/' style="cursor:pointer">
回答by Kamal
Try this:
尝试这个：
HTML:
HTML：
<table width="200" border="1" class="table">
<tr>
<td><a href="#"> </a></td>
<td> </td>
<td> </td>
</tr>
</table>
CSS:
CSS：
.table a
{
display:block;
text-decoration:none;
}
I hope it will work fine.
我希望它能正常工作。
回答by azawaza
Try this way:
试试这个方法：
<td><a href="..." style="display:block;"> </a></td>
回答by Philip
Easy with onclick-function and a javascript link:
使用 onclick-function 和 javascript 链接很容易：
<td onclick="location.href='yourpage.html'">go to yourpage</td>
<td onclick="location.href='yourpage.html'">go to yourpage</td>
回答by Christhofer Natalius
I have also been looking for a solution, and just found this code on another site:
我也一直在寻找解决方案，刚刚在另一个网站上找到了这段代码：
<td style="cursor:pointer" onclick="location.href='mylink.html'">link</td>
<td style="cursor:pointer" onclick="location.href='mylink.html'">link</td>
回答by shootz
Why not combine the onclick method with the <a>element inside the <td>for backup for non-JS? Seems to work great.
为什么不将 onclick 方法与非 JS<a>的<td>for 备份中的元素结合起来呢？似乎工作得很好。
<td onclick="location.href='yourpage.html'"><a href="yourpage.html">Link</a></td>
回答by Mahdi Jazini
Problems:
问题：
(User: Kamal)It's a good way, but you forgot the vertical align problem! using this way, we can't put the link exactly at the center of the TD element! even with vertical-align:middle;
（用户：Kamal）这是个好方法，但你忘记了垂直对齐问题！使用这种方式，我们不能将链接正好放在 TD 元素的中心！即使使用垂直对齐：中间；
(User: Christ)Your answer is the best answer, because there is no any align problem and also today JavaScript is necessary for every one... it's in every where even in an old smart phone... and it's enable by default...
（用户：Christ）你的答案是最好的答案，因为没有任何对齐问题，而且今天 JavaScript 对每个人来说都是必需的......它在任何地方甚至在旧智能手机中......并且默认情况下启用。 ..
My Suggestion to complete answer of (User: Christ):
我对完成（用户：Christ）回答的建议：
HTML:
HTML：
<td style="cursor:pointer" onclick="location.href='mylink.html'"><a class="LN1 LN2 LN3 LN4 LN5" href="mylink.html" target="_top">link</a></td>
CSS:
CSS：
a.LN1 {
font-style:normal;
font-weight:bold;
font-size:1.0em;
}
a.LN2:link {
color:#A4DCF5;
text-decoration:none;
}
a.LN3:visited {
color:#A4DCF5;
text-decoration:none;
}
a.LN4:hover {
color:#A4DCF5;
text-decoration:none;
}
a.LN5:active {
color:#A4DCF5;
text-decoration:none;
}
回答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 Jason
I have seen this before when people are trying to build a calendar. You want the cell linked but do not want to mess with anything else inside of it, try this and it might solve your problem.
我以前在人们尝试构建日历时看到过这一点。您想要链接单元格但不想弄乱其中的任何其他内容，试试这个，它可能会解决您的问题。
<tr>
<td onClick="location.href='http://www.stackoverflow.com';">
Cell content goes here
</td>
</tr>
