如何制作表格超链接的单元格
如何在不使用javascript或jquery的html中将整个表格单元格超链接？如何制作表格超链接的单元格
我试图把HREF在td标签本身，但它不是至少使用Chrome 18
<td href='http://www.m-w.com/dictionary/' style="cursor:pointer">
试试这个：
HTML：
<table width="200" border="1" class="table">
<tr>
<td><a href="#"> </a></td>
<td> </td>
<td> </td>
</tr>
</table>
CSS：
.table a
{
display:block;
text-decoration:none;
}
我希望它能正常工作。
是的，这是最好的方式，但你忘了垂直对齐的问题！使用这种方式，我们不能将链接完全放在td元素的中心......自己测试......用style =“display：block;”没有style =“display：block;”我认为也许JavaScript的方式更好，因为今天JavaScript是每个人都需要的......看看我的答案...... – 2016-11-02 16:32:32
试试这个方法：
<td><a href="..." style="display:block;"> </a></td>
感谢您的快速回复，但
是的，这是最好的方式，但你忘记了垂直对齐问题！使用这种方式，我们不能将链接完全放在td元素的中心......自己测试......用style =“display：block;”没有style =“display：block;”我认为也许JavaScript的方式更好，因为今天的JavaScript是必要的每一个... – 2016-11-02 16:03:07
这里是我的解决方案：
<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（测试浏览器）
这种作品，但当我将光标移动到单元格上时，它会在指针和手部之间交替。 – Hawkee 2015-11-30 16:52:35
在我看来，补丁不是一个好方法 – 2016-11-02 16:24:26
易与onclick函数和JavaScript链接：
<td onclick="location.href='yourpage.html'">go to yourpage</td>
当使用其他答案时，链接不一定占据''元素中的所有空间。这是解决问题的唯一答案！ – frenchDolphin 2015-02-01 21:58:39
这也不会创建一个真正的超链接，因此，例如，链接目标不会出现在Chrome浏览器视图的底部，也不能按Ctrl键单击以在新选项卡中打开目标等。 – ChrisFox 2015-12-10 09:14:04
我也一直在寻找一个解决方案，而只是发现在其他网站上的代码：
<td style="cursor:pointer" onclick="location.href='mylink.html'">link</td>
问题：
（网友：卡迈勒）这是一个很好方式，但你忘了垂直对齐的问题！使用这种方式，我们不能将链接完全放在TD元素的中心！即使使用vertical-align：middle;
（网友：基督）你的回答是最好的答案，因为没有任何对齐问题，也是当今JavaScript是必需的每一个......这是在每一个地方，甚至在一个古老的智能手机...它是默认启用...
我的建议来完成（网友：基督）的答案
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：
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;
}
为什么不与<td>内<a>元素进行备份非JS结合的onclick方法？似乎很好。
<td onclick="location.href='yourpage.html'"><a href="yourpage.html">Link</a></td>
我之前在人们试图构建日历时就已经看到过这个。你想要连接的单元格，但不想混淆其中的任何其他内容，试试这个，它可能会解决你的问题。
<tr>
<td onClick="location.href='http://www.stackoverflow.com';">
Cell content goes here
</td>
</tr>
- 1. 表格，表单，超链接，锚链接的使用
- 2. excel表格如何限制单元格输入内容
- 3. 表格添加、超链接
- 4. 超链接有哪几种 制作表格时WPS怎么在表格中插入超链接
- 5. Excel操做之如何链接多个单元格的内容
- 6. Excel - 如何在 Excel 表格的一个单元格内换行？
- 7. 如何合并Google表格中的单元格
- 8. 如何制作超级链接报表(盈帆报表:efreport.com)
- 9. word单元格斜网格_如何在Word中的所有表上显示和隐藏单元格网格线
- 10. 表格的制作
- 11. WPS表格如何实现单元格内粘贴图片
- 12. layui：数据表格如何合并单元格
- 13. 如何防止单元格在Google表格中进行编辑
- 14. EXCEL表格超链接图片
- 15. react中合并表格的单元格
- 16. ppwjs之bootstrap表格：String.到表头单元格元素 和 String.到表格单元格元素
- 17. jxl 冻结单元格_如何在Word中冻结表格中单元格的大小
- 18. HTML5 简单的表格制作（2）
- 19. Excel 单元格不能设置超链接
- 20. js动态生成表格【含合并单元格的表格】
- 21. Office EXCEL 中如何让一个单元格的数据链接到另一个工作表的数据
- 22. html制作表格
- 23. 如何通过报表单元格右键控制报表跳转到不同链接地址
- 24. LaTeX插入矩阵、表格、带斜线表头的表格、图片、超链接
- 25. PDF格式的文件如何添加超链接
- 26. excel单元格寻找工作簿_如何查看Excel工作簿中的所有命名单元格范围
- 27. js 合并表格单元格
- 28. Bootstrap-表格合并单元格
- 29. vue表格合并单元格
- 30. latex表格单元格内换行
这里是我的解决方案：
<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（测试浏览器）
这种作品，但当我将光标移动到单元格上时，它会在指针和手部之间交替。 – Hawkee 2015-11-30 16:52:35
在我看来，补丁不是一个好方法 – 2016-11-02 16:24:26
易与onclick函数和JavaScript链接：
<td onclick="location.href='yourpage.html'">go to yourpage</td>
当使用其他答案时，链接不一定占据''元素中的所有空间。这是解决问题的唯一答案！ – frenchDolphin 2015-02-01 21:58:39
这也不会创建一个真正的超链接，因此，例如，链接目标不会出现在Chrome浏览器视图的底部，也不能按Ctrl键单击以在新选项卡中打开目标等。 – ChrisFox 2015-12-10 09:14:04
我也一直在寻找一个解决方案，而只是发现在其他网站上的代码：
<td style="cursor:pointer" onclick="location.href='mylink.html'">link</td>
问题：
（网友：卡迈勒）这是一个很好方式，但你忘了垂直对齐的问题！使用这种方式，我们不能将链接完全放在TD元素的中心！即使使用vertical-align：middle;
（网友：基督）你的回答是最好的答案，因为没有任何对齐问题，也是当今JavaScript是必需的每一个......这是在每一个地方，甚至在一个古老的智能手机...它是默认启用...
我的建议来完成（网友：基督）的答案
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：
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;
}
为什么不与<td>内<a>元素进行备份非JS结合的onclick方法？似乎很好。
<td onclick="location.href='yourpage.html'"><a href="yourpage.html">Link</a></td>
我之前在人们试图构建日历时就已经看到过这个。你想要连接的单元格，但不想混淆其中的任何其他内容，试试这个，它可能会解决你的问题。
<tr>
<td onClick="location.href='http://www.stackoverflow.com';">
Cell content goes here
</td>
</tr>
副本http://stackoverflow.com/questions/3337914/how-to-make-a-td-a-link – Usman 2012-04-09 07:37:47
已经讨论过了。答案在这里：http://stackoverflow.com/a/3966257/1320588 关心。 – sleepwalker 2012-04-09 07:38:19
@vaichidrewar你可以投票结束一个问题作为另一个问题的重复，现在你有超过3000的声望。 – 2016-09-30 04:59:23