我使用Bootstrap和以下不工作:
<tbody>
<a href="#">
<tr>
<td>Blah Blah</td>
<td>1234567</td>
<td>£158,000</td>
</tr>
</a>
</tbody>
我使用Bootstrap和以下不工作:
<tbody>
<a href="#">
<tr>
<td>Blah Blah</td>
<td>1234567</td>
<td>£158,000</td>
</tr>
</a>
</tbody>
当前回答
有一个很好的方法可以在<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>内使用<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+单击)
为什么我们不应该使用“div”标签....
<div>
<a href="" > <div> Table row of content here.. </div> </a>
</div>
这里有一个简单的解决办法。
<tr style='cursor: pointer; cursor: hand;' onclick="window.location='google.com';"></tr>
你可以在每个<td>中包含一个锚,如下所示:
<tr>
<td><a href="#">Blah Blah</a></td>
<td><a href="#">1234567</a></td>
<td><a href="#">more text</a></td>
</tr>
然后你可以使用display:block;使整行可单击。
tr:hover {
background: red;
}
td a {
display: block;
border: 1px solid black;
padding: 16px;
}
这里是jsFiddle的例子。
这可能是最优的,除非使用JavaScript。
你可以给行一个id,例如。
<tr id=“special”> ... </tr>
然后使用jquery说:
$(' #特别').onclick(函数(){窗口= " http://urltolinkto.com/x/y/z ";})