前面没有提到的一个解决方案是在一个单元格中使用单个链接，并使用一些CSS来扩展这个链接:

table { border: 1px solid; width: 400px; overflow: hidden; } tr:hover { background: gray; } tr td { border: 1px solid; } tr td:first-child { position:relative; } a:before { content: ''; position:absolute; left: 0; top: 0; bottom: 0; display: block; width: 400px; } <table> <tr> <td><a href="https://google.com">First column</a></td> <td>Second column</td> <td>Third column</td> </tr> <tr> <td><a href="https://stackoverflow.com">First column</a></td> <td>Second column</td> <td>Third column</td> </tr> </table>

<tbody>
    <tr data-href='www.bbc.co.uk'>
        <td>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
    <tr data-href='www.google.com'>
        <td>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
</tbody>

<script>
    jQuery(document).ready(function ($) {
        $('[data-href]').click(function () {
            window.location = $(this).data("href");
        });
    });
</script>

虽然这里的主要解决方案很棒，但我的解决方案消除了对类的需求。您所需要做的就是添加包含URL的data-href属性。

我知道有人已经写了差不多一样的，但我的方式是正确的方式(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 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值(如上面的例子)。

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

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

<div>

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

</div>

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

例如在这里工作