链接整个表格行？
我知道有可能链接整个表格单元格与CSS。
.tableClass td a{ display: block; } 有没有办法将链接应用到整个表格行？
我同意Matti 。 用一些简单的javascript很容易做到。 一个简单的jQuery例子会是这样的：
<tr> <td><a href="http://www.example.com/">example</a></td> <td>another cell</td> <td>one more</td> </tr>
和
$('tr').click( function() { window.location = $(this).find('a').attr('href'); }).hover( function() { $(this).toggleClass('hover'); });
然后在你的CSS
tr.hover { cursor: pointer; /* whatever other hover styles you want */ }
很不幸的是，不行。 不是HTML和CSS。 你需要a元素来build立一个链接，而且你不能把整个表格行整合在一起。
你可以得到最接近的链接每个表单元格。 就个人而言，我只是链接一个单元格，并使用JavaScript，使其余的点击。 无论如何，至less有一个单元格看起来像链接，下划线和全部是很好的。
这里有一个简单的jQuery代码片断，使所有包含链接的表行都可以点击（它会查找第一个链接并“点击”它）
$("table").on("click", "tr", function(e) { if ($(e.target).is("a,input")) // anything else you don't want to trigger the click return; location.href = $(this).find("a").attr("href"); });
例如： http : //dl.dropbox.com/u/2915462/probonopublico/linktablerow.html
链接整行：
<table> <tr onclick="location.href='SomeWherrrreOverTheWebsiiiite.html'">** <td> ...content... </td> <td> ...content... </td> ... </tr> </table>
如果您希望在整行上的鼠标hover上突出显示，则：
<table class="nogap"> <tr class="lovelyrow" onclick="location.href='SomeWherrrreOverTheWebsiiiite.html'">** ... </tr> </table>
与类似于以下的CSS，这将消除表格单元格之间的差距，并更改hover的背景：
tr.lovelyrow{ background-color: hsl(0,0%,90%); } tr.lovelyrow:hover{ background-color: hsl(0,0%,40%); cursor: pointer; } table.nogap{ border-collapse: collapse; }
如果您使用的是Rails 3.0.9，那么您可能会发现这个示例代码很有用：
海有很多鱼，鱼有很多的尺度，这里是app / view / fish / index.erb的片段
<table> <% @fishies.each do |fish| %> <tr onclick="location.href='<%= sea_fish_scales_path(@sea, fish) %>'"> <td><%= fish.title %></td> </tr> <% end %> </table>
@fishies和@sea在app / controllers / seas_controller.rb中定义
使用::before伪元素。 这样只有你不必处理Javascript或为每个单元格创build链接。 使用下面的table结构
<table> <tr> <td><a href="http://domain.tld" class="rowlink">Cell</a></td> <td>Cell</td> <td>Cell</td> </tr> </table>
我们所要做的就是在这种情况下在所需的链接（ .rowlink ）上使用::before创build一个跨越整个表宽度的块元素。
table { position: relative; } .rowlink::before { content: ""; display: block; position: absolute; left: 0; width: 100%; height: 1.5em; /* don't forget to set the height! */ }
演示
演示中的::before以红色突出显示，以便您可以看到它在做什么。
我觉得最简单的解决scheme是sans javascript，并简单地把链接放在每个单元格中（假如你的单元格之间没有大量的沟渠，或者真的认为是边界线）。 有你的CSS：
.tableClass td a{ display: block; }
然后为每个单元添加一个链接：
<table class="tableClass"> <tr> <td><a href="#link">Link name</a></td> <td><a href="#link">Link description</a></td> <td><a href="#link">Link somthing else</a></td> </tr> </table>
无聊但干净。
这也取决于你是否需要使用表格元素。 你可以使用CSS来模仿一个表格，并将一个A元素作为行
<div class="table" style="width:100%;"> <a href="#" class="tr"> <span class="td"> cell 1 </span> <span class="td"> cell 2 </span> </a> </div>
CSS：
.table{display:table;} .tr{display:table-row;} .td{display:table-cell;} .tr:hover{background-color:#ccc;}
要连接整行，需要在行上定义onclick函数，它是<tr>元素，并定义一个鼠标hover在tr元素的CSS中，使鼠标指向web中的典型点击手形：
在表中：
<tr onclick="location.href='http://www.google.com'"> <td>blah</td> <td>blah</td> <td><strong>Volker Dötsch & Stefan Knapp</strong></td> </tr>
在相关的CSS中：
tr:hover { cursor: pointer; }
