为什么我们不应该使用“div”标签....

<div>

  <a href="" >     <div>  Table row  of content here..  </div>    </a>

</div>

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

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

为指针视图添加样式

[data-href] { cursor: pointer; }

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

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

有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.

一个非常简单的选择是使用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>

例如在这里工作

使用标准Bootstrap 4.3+实现如下-没有jQuery或任何额外的css类需要!

关键是在单元格中的文本上使用拉伸链接，并将<tr>定义为包含块。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <table class="table table-hover"> <tbody> <tr style="transform: rotate(0);"> <th scope="row"><a href="#" class="stretched-link">1</a></th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>

你可以用不同的方式定义包含块，例如将transform设置为非none值(如上面的例子)。

要了解更多信息，请阅读这里的伸缩链接引导文档。

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

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