这里有一篇文章解释了如何在2020年做到这一点:https://www.robertcooper.me/table-row-links

这篇文章解释了3种可能的解决方案:

使用JavaScript。 用锚定元素包装所有表单元格。 使用<div>元素代替原生HTML表格元素，以使表格行为<a>元素。

本文深入讨论了如何实现每个解决方案(使用到codedependency的链接)，还考虑了一些边缘情况，例如如何处理希望在表单元格中添加链接的情况(嵌套<a>元素不是有效的HTML，因此需要解决这个问题)。

正如@gameliela所指出的，找到一种不将整行作为链接的方法也是值得的，因为这将简化许多事情。然而，我确实认为，将整个表行作为一个链接来点击是一种很好的用户体验，因为用户可以方便地单击表上的任何位置来导航到相应的页面。

一个非常简单的选择是使用on-click，在我看来，这更正确，因为这分离了视图和控制器，你不需要硬编码URL或其他你需要通过点击完成的事情。 它也适用于Angular的ng-click。

<table>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
</table>

<script>
function myFunction(x) {
    alert("Row index is: " + x.rowIndex);
}
</script>

例如在这里工作

你可以在tr中使用onclick javascript方法，使其可点击，如果你需要建立你的链接，由于一些细节，你可以在javascript中声明一个函数，并在onclick中调用它，传递一些值。

还有另一种方法……

HTML:

<table>
<tbody>
       <tr class='clickableRow'>
       <td>Blah Blah</td>
       <td>1234567</td>
       <td>£158,000</td>
        </tr>
</tbody>
</table>

jQuery:

$(function() {
      $(".clickableRow").on("click", function() {
          location.href="http://google.com";

      });

});

您可以将按钮角色添加到表行中，Bootstrap将在不更改css的情况下更改游标。我决定使用这个角色作为一种方法，用很少的代码轻松地使任何行都可以单击。

Html

<table class="table table-striped table-hover">
     <tbody>
          <tr role="button" data-href="#">
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
          </tr>
     </tbody>
</table>

jQuery

$(function(){
     $(".table").on("click", "tr[role=\"button\"]", function (e) {
          window.location = $(this).data("href");
     });
});

您可以应用相同的原则将按钮角色添加到任何标记。

一个更灵活的解决方案是使用data-href属性来定位任何对象。这样你就可以在不同的地方轻松地重用代码。

<tbody>
    <tr data-href="https://google.com">
        <td>Col 1</td>
        <td>Col 2</td>
    </tr>
</tbody>

然后在你的jQuery中，只需瞄准具有该属性的任何元素:

jQuery(document).ready(function($) {
    $('*[data-href]').on('click', function() {
        window.location = $(this).data("href");
    });
});

不要忘记样式你的css:

[data-href] {
    cursor: pointer;
}

现在，您可以将data-href属性添加到任何元素，它都可以工作。当我写这样的片段时，我希望它们是灵活的。如果你有一个香草的js解决方案，请随意添加。