我无法将表格行设置为链接，只能使用CSS和HTML。我尝试了从在行中使用div到其他方法，但仍无法使其正常工作。
16个回答
182
你有两种方法可以实现这个功能：
使用javascript：
<tr onclick="document.location = 'links.html';">使用锚点：
<tr><td><a href="">text</a></td><td><a href="">text</a></td></tr>
我用第二种方法实现了它：
table tr td a {
display:block;
height:100%;
width:100%;
}
table tr td {
padding-left: 0;
padding-right: 0;
}
这是第二个示例的简单演示：演示
- Esteban Küber
9
10由于 OP 说“只有 CSS 和 HTML”，我认为接受的是第二个答案。请注意，如果没有 border=0，您将在表格单元格之间得到一个“丢失的链接”间隙。 - system PAUSE
1如果我没记错的话，表格单元格只需要折叠起来，但可以有边框。 - Esteban Küber
5<a>标签不允许在其内部包含其他HTML元素。那么，如果我们想要链接整个包含多个单元格的表格行，该怎么办呢？就像这样：<tr><a href=""><td>文本</td><td>.....</a></tr>。我们不能这样做对吧？ - Abimaran Kugathasan
4我建议使用"display:inline-block"代替"block"。 使用"block"显示时，我发现Chrome会忽略"height:100％"，如果同一行中有其他高度更大的项目，则不会使<td>的整个高度可点击。 使用"inline-block"可以解决这个问题，并且还可以修复表格元素内文本被裁剪的可能相关问题。 - orrd
2锚点在列之间仍然存在死区（已使用Google Chrome版本40.0.2214.115 m进行测试） - Yuri
显示剩余4条评论
55
我自己制作了一个自定义的jQuery函数：
Html
<tr data-href="site.com/whatever">
jQuery
$('tr[data-href]').on("click", function() {
document.location = $(this).data('href');
});
这对我来说很容易且完美。希望它也能帮到你。
(我知道楼主只想要CSS和HTML，但请考虑使用jQuery)
编辑
同意Matt Kantor使用data属性。已经编辑了上面的答案。
- Ron van der Heijden
5
那其实很优雅。我不知道它是否符合w3c标准的有效html。 - Mahn
15我会使用
data-href 或类似的东西。 - Matt Kantor2JSFiddle链接导致404错误。 - Flox
1将类添加到
<table class='tr_link' >，并在CSS中为.tr_link{cursor:pointer}以获得最佳使用效果。 - Bagova7要在悬停时添加手部效果，请将
tr[data-href] { cursor: pointer } 添加到您的样式表中。 - OverCoder28
如果您使用支持的浏览器，可以使用CSS将<a>转换为表格行：
.table-row { display: table-row; }
.table-cell { display: table-cell; }
<div style="display: table;">
<a href="..." class="table-row">
<span class="table-cell">This is a TD... ish...</span>
</a>
</div>
当然，你不能在<a>标签中嵌套块级元素。同时，你也不能将其与常规的<table>标签混合使用。
- Greg
2
1好主意，谢谢！它似乎在Opera 8.5/、Firefox 0.8/、IE8、iPhone模拟器/Safari/非常老的版本上都能工作 :) - biziclop
1这应该是开发人员尝试采用的技术，因为所有当前的浏览器都支持CSS表格：http://caniuse.com/#feat=css-table。唯一的问题是我不能在Bootstrap中使用它！:'( - shangxiao
14
如果你必须使用表格，可以在每个表格单元格中放置一个链接：
<table>
<tbody>
<tr>
<td><a href="person1.html">John Smith</a></td>
<td><a href="person1.html">123 Fake St</a></td>
<td><a href="person1.html">90210</a></td>
</tr>
<tr>
<td><a href="person2.html">Peter Nguyen</a></td>
<td><a href="person2.html">456 Elm Ave</a></td>
<td><a href="person2.html">90210</a></td>
</tr>
</tbody>
</table>
并使链接填满整个单元格：
table tbody tr td a {
display: block;
width: 100%;
height: 100%;
}
如果您可以使用 <div> 而非表格，您的HTML将更加简单，并且链接之间不会出现“间隙”:
<div class="myTable">
<a href="person1.html">
<span>John Smith</span>
<span>123 Fake St</span>
<span>90210</span>
</a>
<a href="person2.html">
<span>Peter Nguyen</span>
<span>456 Elm Ave</span>
<span>90210</span>
</a>
</div>
这是与<div>方法相关的CSS：
.myTable {
display: table;
}
.myTable a {
display: table-row;
}
.myTable a span {
display: table-cell;
padding: 2px; /* this line not really needed */
}
- system PAUSE
1
1如果你想展示表格数据，_一定要_使用表格。使用一堆 div 和 span 是语义上不正确的，如果 CSS 没有加载，会使内容难以阅读，并且对于使用屏幕阅读器的人来说无法访问。 - gulima
12
通常的做法是将一些JavaScript分配给
如果不能使用JavaScript，那么你必须使用一个技巧:
1. 在同一行中的每个
TR元素的onClick属性。如果不能使用JavaScript，那么你必须使用一个技巧:
1. 在同一行中的每个
TD中添加相同的链接(链接必须是单元格中最外层的元素)。
2. 将链接转换为块元素：a { display: block; width: 100%; height: 100%; }
后者将强制链接填满整个单元格，以便在任何地方单击都会调用该链接。- Aaron Digulla
7
来自sirwilliam的回答最适合我。我改进了Javascript，支持热键Ctrl + LeftClick（在新标签页中打开页面）。事件ctrlKey由PC使用，metaKey由Mac使用。
Javascript
$('body').on('mousedown', 'tr[url]', function(e){
var click = e.which;
var url = $(this).attr('url');
if(url){
if(click == 2 || (click == 1 && (e.ctrlKey || e.metaKey))){
window.open(url, '_blank');
window.focus();
}
else if(click == 1){
window.location.href = url;
}
return true;
}
});
Example
- Vlastislav Novák
2
好的。Ctrl + 左键单击不会破坏用户界面。 - Yuri
1仍然无法使用“右键单击->在新标签页中打开”或“在新窗口中打开”。 - JGInternational
6
你不能用 <a> 标签包裹 <td> 元素，但你可以使用 onclick 事件来调用一个函数实现类似的功能。可以参考这个例子：here，像这样的函数：
<script type="text/javascript">
function DoNav(url)
{
document.location.href = url;
}
</script>
然后像这样将其添加到您的表格中：
<tr onclick="DoNav('http://stackoverflow.com/')"><td></td></tr>
- Donut
1
22使用onClick来达到这种目的的问题之一是用户无法使用中间鼠标按钮或控制键+单击在新标签页中打开链接（对于我们中那些喜欢以这种方式打开链接的人来说，这可能非常令人沮丧）。另外要注意的是，没有必要通过创建仅执行一个简单命令的函数来复杂化事情。如果你要这样做，只需直接将“document.location.href=…”放入onclick属性中即可。 - orrd
4
我知道这个问题已经有答案了，但是我仍然不喜欢这个页面上的任何解决方案。对于使用JQuery的人，我提供了一种最终解决方案，使您可以为表格行提供几乎与标签相同的行为。
这是我的解决方案：
jQuery 您可以将此添加到标准包含的javascript文件中
$('body').on('mousedown', 'tr[url]', function(e){
var click = e.which;
var url = $(this).attr('url');
if(url){
if(click == 1){
window.location.href = url;
}
else if(click == 2){
window.open(url, '_blank');
window.focus();
}
return true;
}
});
HTML 现在您可以在 HTML 中的任何 <tr> 元素中使用此功能。
<tr url="example.com">
<td>value</td>
<td>value</td>
<td>value</td>
<tr>
- botenvouwer
2
非常接近纯JS。
document.querySelector('tr[url]').addEventListener("mousedown", function(e){ var click = e.which; var url = this.getAttribute("url"); if(url){ if(click == 1){ window.location.href = url; } else if(click == 2){ window.open(url, '_blank'); window.focus(); } return true; } }); - Ramon Bakker2
当我想要模拟一个包含链接的<tr>标签，但仍符合HTML标准时，我会这样做。
HTML:
HTML:
<table>
<tr class="trLink">
<td>
<a href="#">Something</a>
</td>
</tr>
</table>
CSS：
tr.trLink {
cursor: pointer;
}
tr.trLink:hover {
/*TR-HOVER-STYLES*/
}
tr.trLink a{
display: block;
height: 100%;
width: 100%;
}
tr.trLink:hover a{
/*LINK-HOVER-STYLES*/
}
这样，当有人用鼠标悬停在一个TR上时，整行（和其中的链接）都会显示悬停样式，他看不到有多个链接。
希望能对某些人有所帮助。
Fiddle 在此处
- narcolepticvolcano
1
这样可以避免在 tr 中重复链接 - 只需从第一个 a 中提取即可。
$(".link-first-found").click(function() {
var href;
href = $(this).find("a").attr("href");
if (href !== "") {
return document.location = href;
}
});
- Will
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接