如何将链接扩展到整个单元格？

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 来制作，因为 高度属性始终引用元素内容，而不是父元素高度。

再次检查 Fiddle 并了解它是如何用简单的 JavaScript 制作的。它获取父元素的高度并将其保存在一个变量中，然后将其附加到您的锚元素。

Answer 3

您可以在每个单元格上使用一点 JavaScript 来修复此问题，这样当单击单元格时 JavaScript 会将用户发送到一个 URL。您需要对每个单元格使用这行代码 < td> < /td>

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

我保留了< a＞ < /一>标记到位，以防万一用户没有启用 javascript，但单元格的背景将保持不变，并且使用这段 javascript 应该覆盖大多数用户。

Answer 4

使用 jQuery 您可以将 click 事件侦听器附加到整个 页面。 元素。

假设变量 redirectLink 是在脚本的前面定义的。
例如：
var redirectLink = "http://msmvps.com/blogs/jon_skeet/";
但这可以是您选择的任何其他很棒的 URL ;)

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

$(".cellLinks") 是 jQuery 选择器，其中包含带有 cellLink 类的所有元素。示例：
c 1

cellLink 只是我发明的一个名称 - 您可以将其命名为任何对您来说听起来合乎逻辑的名称。

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

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

在这种情况下，将其称为更通用的名称可能是更好的主意。

Answer 5

我会选择 Jannis M 的 答案，但将其修改为使用每行的高度，如下所示：

$(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 解决方案。