链接整个表行？

Question

我知道可以用 CSS 链接整个表格单元格。

 .tableClass td a{
   display: block;
}

有没有办法将链接应用于整个表格行？

原文由 santa 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我同意 马蒂。使用一些简单的 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 */
}

原文由 Jeff 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用 ::before 伪元素。只有这样，您才不必处理 Javascript 或为每个单元格创建链接。使用以下 table 结构

<table>
  <tr>
    <td><a href="http://domain.tld" class="rowlink">Cell</a></td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>

在这种情况下，我们所要做的就是在所需链接 ( .rowlink ) 上使用 ::before 创建一个跨越整个表格宽度的块元素。

 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 在演示中以红色突出显示，因此您可以看到它在做什么。

原文由 Elliott 发布，翻译遵循 CC BY-SA 4.0 许可协议