我使用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>
当前回答
可以使用链接的表行,但不能使用标准的<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"。在这里找到更多的指南。
其他回答
另一种选择使用<a>, CSS位置和一些jQuery或JS:
HTML:
<table>
<tr>
<td>
<span>1</span>
<a href="#" class="rowLink"></a>
</td>
<td><span>2</span></td>
</tr>
</table>
CSS:
table tr td:first-child {
position: relative;
}
a.rowLink {
position: absolute;
top: 0; left: 0;
height: 30px;
}
a.rowLink:hover {
background-color: #0679a6;
opacity: 0.1;
}
然后你需要给一个宽度,使用例如jQuery:
$(function () {
var $table = $('table');
$links = $table.find('a.rowLink');
$(window).resize(function () {
$links.width($table.width());
});
$(window).trigger('resize');
});
为什么我们不应该使用“div”标签....
<div>
<a href="" > <div> Table row of content here.. </div> </a>
</div>
使用标准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值(如上面的例子)。
要了解更多信息,请阅读这里的伸缩链接引导文档。
你可以在tr中使用onclick javascript方法,使其可点击,如果你需要建立你的链接,由于一些细节,你可以在javascript中声明一个函数,并在onclick中调用它,传递一些值。
下面的代码将使您的整个表可点击。单击本例中的链接将在警告对话框中显示该链接,而不是按照该链接进行操作。
HTML:
下面是上面例子背后的HTML:
<table id="example">
<tr>
<th> </th>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td><a href="apples">Edit</a></td>
<td>Apples</td>
<td>Blah blah blah blah</td>
<td>10.23</td>
</tr>
<tr>
<td><a href="bananas">Edit</a></td>
<td>Bananas</td>
<td>Blah blah blah blah</td>
<td>11.45</td>
</tr>
<tr>
<td><a href="oranges">Edit</a></td>
<td>Oranges</td>
<td>Blah blah blah blah</td>
<td>12.56</td>
</tr>
</table>
CSS
而CSS:
table#example {
border-collapse: collapse;
}
#example tr {
background-color: #eee;
border-top: 1px solid #fff;
}
#example tr:hover {
background-color: #ccc;
}
#example th {
background-color: #fff;
}
#example th, #example td {
padding: 3px 5px;
}
#example td:hover {
cursor: pointer;
}
jQuery
最后是jQuery,它使魔术发生:
$(document).ready(function() {
$('#example tr').click(function() {
var href = $(this).find("a").attr("href");
if(href) {
window.location = href;
}
});
});
它所做的是,当单击一行时,搜索属于锚的href。如果找到一个,则将窗口的位置设置为该href。