这里有一个通用的方法。定义这个css:

// css
td a.linker {
    color:#212529;
    display: block;
    padding: 16px;
    text-decoration: none;
}

然后把这个放在每个td里:

<td>
  <a class="linker" href="www.google.com"> 
    Cell content goes here 
  </a>
</td>

另一种选择使用<a>， CSS位置和一些jQuery或JS:

HTML:

<table>
<tr>
    <td>
        <span>1</span>
        <a href="#" class="rowLink"></a>
    </td>
    <td><span>2</span></td>
</tr>
</table>

CSS:

table tr td:first-child {
    position: relative;
}
a.rowLink {
    position: absolute;
    top: 0; left: 0;
    height: 30px;
}
a.rowLink:hover {
    background-color: #0679a6;
    opacity: 0.1;
}

然后你需要给一个宽度，使用例如jQuery:

    $(function () {
        var $table = $('table');
            $links = $table.find('a.rowLink');

        $(window).resize(function () {
            $links.width($table.width());
        });

        $(window).trigger('resize');
    });

你不能这么做。它是无效的HTML。你不能把<a>放在<tbody>和<tr>之间。试试这个吧:

<tr onclick="window.location='#';">
   ...
</tr>

为指针视图添加样式

[data-href] { cursor: pointer; }

当您开始处理它时，您需要使用JavaScript在HTML之外分配单击处理程序。

您可以将按钮角色添加到表行中，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");
     });
});

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

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

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

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

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

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

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