如何在整个单元格上拉伸链接？

Question

我有一个表，其中包含可以单击以编辑行的链接（锚点）。 我希望将这些链接拉伸到包含单元格的整个宽度和高度。我已将它们设置为display: block;，因此它们具有全宽：

问题是，我无法使用CSS将它们调到全高。请参阅我的示例：http://jsfiddle.net/timbuethe/53Ptm/2/。

Answer 1

在块元素上设置一个任意大的负边距和相等的填充，并在父元素上隐藏溢出。

td {
    overflow: hidden;
}
td a {
    display: block;
    margin: -10em;
    padding: 10em;
}

http://jsfiddle.net/53Ptm/43/

Answer 2

我不认为它只能使用CSS，因为height属性总是引用元素内容，而不是父元素高度。

再次检查Fiddle，看看如何使用简单的javascript制作它。它获取父元素高度并将其保存在变量中，然后将变量样式规则附加到锚元素。

Answer 3

你可以在每个单元格上使用一些小的javascript来解决这个问题，这样当点击单元格时，javascript会将用户发送到网址。你会想要为每个单元使用这行代码＆lt; td＆gt; ＆LT; / td＆gt;

<td bgcolor="lightgray" onClick="document.location.href='http://www.URLHERE.com/';" style="cursor:pointer;"><a>c 1</a></td>

我保持＆lt; a＆gt; ＆LT; / a＆gt;标签就位，以防用户没有启用javascript，但单元格的背景将保持不变，使用这段javascript应覆盖大多数用户。

Answer 4

使用jQuery，您可以将click事件监听器附加到整个<td>元素。

假设先前在脚本中定义了变量redirectLink。 例如：
var redirectLink = "http://msmvps.com/blogs/jon_skeet/";
但这可能是你选择的任何其他令人敬畏的URL;）

$(".cellLink").click(function(){
  // execute the redirect here 
  top.location.href = redirectLink;
});

$(".cellLinks")是jQuery Selector，其中包含所有cellLink类的元素。例如：
<td class="cellLink">c&nbsp1</td>

cellLink只是我发明的一个名字 - 你可以称之为任何听起来合乎逻辑的名字。

如果您在其上放置相同的cellLink类，则可以在整行上实现相同的效果：

<tr class="cellLink">
  <td>...</td>
  ...
</tr>

在这种情况下，最好将其称为更通用的东西。

Answer 5

我要使用Jannis M的answer，但修改它以使用每一行的高度：

$(document).ready(function(){    
    $('table tr').each(function(){
        var $row = $(this);
        var height = $row.height();
        $row.find('a').css('height', height).append(' ');  
    });       
});

另外，我添加了 ，因为空链接（不包含文本节点）无法设置样式（？）。

请参阅我更新的fiddle。

<强>更新 或者，请参阅Gaurav Saxena的answer，了解适用于现代浏览器的仅限CSS的解决方案。