有一个很好的方法可以在<tr>内使用<a>标记，这可能在语义上是不正确的(可能会给你一个浏览器警告)，但不需要JavaScript/jQuery就可以工作:

<!-- HTML -->
<tbody>
  <tr class="bs-table-row">
     <td>Blah Blah</td>
     <td>1234567</td>
     <td>£158,000</td>
     <a class="bs-row-link" href="/your-link-here"></a>
  </tr>
</tbody>

/* CSS */
.bs-table-row {
  position: 'relative';
}

.bs-row-link {
  position: 'absolute';
  left: 0;
  height: '36px'; // or different row height based on your requirements
  width: '100%';
  cursor: 'pointer';
}

PS:注意这里的技巧是将<a>标记作为最后一个元素，否则它将尝试占用第一个<td>单元格的空间。

PPS:现在你的整个行将是可点击的，你可以使用这个链接在新选项卡中打开(Ctrl/CMD+单击)

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

可以使用链接的表行，但不能使用标准的<table>元素。你可以使用display: table样式属性。这里和这里有一些小提琴来演示。

这段代码应该做到这一点:

.table { display: table; } .row { display: table-row; } .cell { display: table-cell; padding: 10px; } .row:hover { background-color: #cccccc; } .cell:hover { background-color: #e5e5e5; } <link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> <div role="grid" class="table"> <div role="row" class="row"> <div role="gridcell" class="cell"> 1.1 </div> <div role="gridcell" class="cell"> 1.2 </div> <div role="gridcell" class="cell"> 1.3 </div> </div> <a role="row" class="row" href="#"> <div role="gridcell" class="cell"> 2.1 </div> <div role="gridcell" class="cell"> 2.2 </div> <div role="gridcell" class="cell"> 2.3 </div> </a> </div>

注意，需要ARIA角色来确保适当的可访问性，因为没有使用标准<table>元素。如果适用，您可能需要添加其他角色，如role="columnheader"。在这里找到更多的指南。

前面没有提到的一个解决方案是在一个单元格中使用单个链接，并使用一些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>

有一个很好的方法可以在<tr>内使用<a>标记，这可能在语义上是不正确的(可能会给你一个浏览器警告)，但不需要JavaScript/jQuery就可以工作:

<!-- HTML -->
<tbody>
  <tr class="bs-table-row">
     <td>Blah Blah</td>
     <td>1234567</td>
     <td>£158,000</td>
     <a class="bs-row-link" href="/your-link-here"></a>
  </tr>
</tbody>

/* CSS */
.bs-table-row {
  position: 'relative';
}

.bs-row-link {
  position: 'absolute';
  left: 0;
  height: '36px'; // or different row height based on your requirements
  width: '100%';
  cursor: 'pointer';
}

PS:注意这里的技巧是将<a>标记作为最后一个元素，否则它将尝试占用第一个<td>单元格的空间。

PPS:现在你的整个行将是可点击的，你可以使用这个链接在新选项卡中打开(Ctrl/CMD+单击)

公认的答案是很好的，但我建议一个小的替代方案，如果您不想在每个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。另一个好处是，我们没有使用类来触发点击，因为类应该只用于样式化。