我知道有人已经写了差不多一样的，但我的方式是正确的方式(div不能是A的子)，也最好使用类。

您可以使用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;}

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

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

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

我投入了很多时间来解决这个问题。

有3种方法:

Use JavaScript. The clear drawbacks: it's not possible to open a new tab natively, and when hovering over the row there will be no indication on status bar like regular links have. Accessibility is also a question. Use HTML/CSS only. This means putting <a> nested under each <td>. A simple approach like this fiddle doesn't work - Because the clickable surface is not necessarily equal for each column. This is a serious UX concern. Also, if you need a <button> on the row, it is not valid HTML to nest it under <a> tag (although browsers are ok with that). I've found 3 other ways to implement this approach. First is ok, the other two are not great. a) Have a look on this example: tr { height: 0; } td { height: 0; padding: 0; } /* A hack to overcome differences between Chrome and Firefox */ @-moz-document url-prefix() { td { height: 100%; } } a { display: block; height: 100%; } It works, but due to inconsistencies between Chrome and Firefox it requires browser-specific hack to overcome the differences. Also Chrome will always align the cell content to the top, which can cause problems with long texts, especially if varying line heights are involved. b) Setting <td> to { display: contents; }. This leads to 2 other problems: b1. If someone else tries to style directly the <td> tag, like setting it to { width: 20px; }, we need to pass that style somehow to the <a> tag. We need some magic to do that, probably more magic than in the Javascript alternative. b2. { display: contents; } is still experimental; specifically it's not supported on Edge. c) Setting <td> to { height: --some-fixed-value; }. This is just not flexible enough. The last approach, which I recommend to seriously thinking of, is to not using clickable rows at all. Clickable rows is not a great UX experience: it's not easy to visually mark them as clickable, and it poses challenges when multiple parts are clickable within the rows, like buttons. So a viable alternative could be to have an <a> tag only on the first column, displayed as a regular link, and give it the role of navigating the whole row.

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

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

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

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

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

公认的答案是很好的，但我建议一个小的替代方案，如果您不想在每个tr重复url。 因此，您将url或href放在数据url表中，而不是tr。

<table data-click data-url="href://blah">    
    <tbody>
        <tr id ="2">
            <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
        </tr>
        <tr id ="3">
            <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
        </tr>
    </tbody>
    </table

jQuery(document).ready(function($) {
    $('[data-click] tbody tr').click(function() {
        var url = $(this).closest('table').data("url");
        var id = $(this).closest('tr').attr('id');
        window.location = url+"?id="+id);
    });
});

这也很好，因为您也不需要将单击数据属性添加到每个tr。另一个好处是，我们没有使用类来触发点击，因为类应该只用于样式化。