使表格单元格中的链接填充整个行的高度

我有一个数据表，每个单元格都是一个链接。我希望允许用户单击表单元格中的任何位置，并让他们点击链接。有时表单元格不止一行，但并非总是如此。我使用 td { display: block }来获取覆盖单元格大部分的链接。当一行中有一个单元格是两行，而其他单元格只有一行时，一行不会填满表格行的整个垂直空间。下面是 HTML 示例，你可以在这里看到它的作用 http://www.jsfiddle.net/RXHuE/:

<head>
<style type="text/css">
td {width: 200px}
td a {display: block; height:100%; width:100%;}
td a:hover {background-color: yellow;}
</style>
<title></title>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<a href="http://www.google.com/">Cell 1<br>
second line</a>
</td>
<td>
<a href="http://www.google.com/">Cell 2</a>
</td>
<td>
<a href="http://www.google.com/">Cell 3</a>
</td>
<td>
<a href="http://www.google.com/">Cell 4</a>
</td>
</tr>
</tbody>
</table>
</body>
91465 次浏览
小开

试试 display: block:

td a {display: block; height:100%;}

[编辑]卧槽... 我可以确定这在 FF 4和 Chrome 中不起作用。这个可以:

td a {display: block;  height: 2.5em; border: 1px solid red;}

这表明 height:100%;没有在表单元格中定义。这可能是因为单元格的大小是从内容获得的(所以内容不能说“ tell me your size”，因为这会导致循环)。它甚至不工作，如果你设置一个高度的细胞像这样:

td {width: 200px; height: 3em; padding: 0px}

同样，上面的代码将失败。因此，我的建议是为链接使用一个定义的高度(可以省略宽度; 对于块元素，默认为100%)。

[编辑2]我在 http://www.cssplay.co.uk/menus/上点击了上百个例子，但是没有一个混合了单行和多行单元格。看来你找到了一个盲点。

小开
最佳答案

您需要对 CSS 进行一个小的更改。让 td height:100%;适用于 IE 8和 FF 3.6，但不适用于 Chrome。

td {
width: 200px;
border: solid 1px green;
height: 100%
}
td a {
display: block;
height:100%;
width:100%;
}

但是除了 IE 和 FF 之外，让 height变成 50px对 Chrome 也有用

td {
width: 200px;
border: solid 1px green;
height: 50px
}
td a {
display: block;
height:100%;
width:100%;
}

编辑:

您已经在这里的另一篇文章中给出了自己的解决方案; 这就是使用 display: inline-block;。 当与我的 Chrome，FF3.6，IE8解决方案结合使用时，这是可行的

td {
width: 200px;
border: solid 1px green;
height: 100%}
td a {
display: inline-block;
height:100%;
width:100%;
}

更新

下面的代码可以在 IE8，FF3.6和 chrome 中使用。

CSS

td {
width: 200px;
border: solid 1px green;
height: 100%;
}
td a {
display: inline-block;
height:100%;
width:100%;
}
td a:hover {
background-color: yellow;
}

超文本标示语言

<table>
<tbody>
<tr>
<td>
<a href="http://www.google.com/">Cell 1<br>
second line</a>
</td>
<td>
<a href="http://www.google.com/">Cell 2</a>
</td>
<td>
<a href="http://www.google.com/">Cell 3</a>
</td>
<td>
<a href="http://www.google.com/">Cell 4</a>
</td>
</tr>
</tbody>
</table>

这个例子是 给你

小开

我将在这里发布相同的答案，就像我在 我自己的问题上做的那样。

受到 Jannis M的 回答的启发，我做了以下事情:

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

我添加了一个 &nbsp;，因为空链接(不包含文本节点)不能被样式化(?)。

看看我更新的 小提琴。

小开

这里唯一的问题是，使用 display: block 会迫使浏览器忽略垂直对齐: 居中..。

哎呀。

我的陪审团操纵它看起来正确的一个细胞的高度: 60和一个字体，占领20像素通过添加一个 br... 然后我意识到我有一些项目与2行文本。该死。

我最终使用了 javascript。Javascript 没有提供好的鼠标点击功能，但是文本行提供了，所以它实际上会触发一个可视化响应，只是不在我想要的地方... 然后 Javascript 会捕捉所有“错过”实际 href 的点击。

也许不是最优雅的解决方案，但目前它工作得很好。

如果我能找到正确的方法。

对于如何添加鼠标图标更改为手的覆盖区域的点击？现在，点击页面可以工作，但是图标只有在点击 href 时才会改变，而 href 只会影响文本。

小开

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

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

Http://jsfiddle.net/rxhue/213/

小开

以下黑客工作[在 Chrome/Firefox/Safari 上测试] Td 和锚点元素具有相同的填充。对于锚也有边距等于-ve 的填充值。

超文本标示语言

<table>
<tr>
<td><a>Hello</a></td>
</tr>
</table>

CSS:

td {
background-color: yellow;
padding: 10px;
}
a {
cursor:pointer;
display:block;
padding: 10px;
margin: -10px;
}

工作小提琴: http://jsfiddle.net/JasYz/

小开

你为什么不干脆去掉 <a>全集，直接在 <td>上添加一个 onClick呢？

<head>
<style type="text/css">
td {
text-align:center;
}
td:hover {
cursor:pointer;
color:#F00;
}
</style>
<title></title>
</head>
<body>
<table>
<tbody>
<tr>
<td onclick="location.href='http://www.google.com/';">Cell 1<br />second line</td>
<td onclick="location.href='http://www.google.com/';">Cell 2</a></td>
<td onclick="location.href='http://www.google.com/';">Cell 3</td>
<td onclick="location.href='www.google.com';">Cell 4</td>
</tr>
</tbody>
</table>

这样你就省去了中间人。

PS: 我知道这个问题在很多年前就有人问过，也有人回答过，但是上面的答案都没有解决我的问题。希望这对谁有帮助。

小开

对我来说，唯一的解决方案是用 <div>代替 <table> <tr>，并相应地使用 display:table和 display:table-row来设计它们的样式。

然后你可以用 <a>代替 <td>，用 display:table-cell设计它的样式。

甚至在不同高度的 <td>内容上也能完美工作。

所以没有锚点的原始 html:

<table>
<tr>
<td>content1<br>another_line</td>
<td>content2</td>
</tr>
</table>

现在变成了:

a:hover
{
background-color:#ccc;
}
    <div style="display:table; width:100%">
<div  style="display:table-row">
<a href="#" style="display:table-cell; border:solid 1px #f00">content1<br>another_line</a>
<a href="#" style="display:table-cell; border:solid 1px #f00">content2</a>
</div>
</div>

小开

有点晚了，但我刚发现了一个不错的解决方案。

您可以结合使用相对元素和绝对定位元素，以及伪元素来获得所需的效果。不需要额外的标记！

将表单元格(<td>)更改为 position: relative;，并在 <a>标记上创建一个 ::before 或者 ::after伪元素，并将其设置为 position: absolute;，同时使用 top: 0; left: 0; right: 0; bottom: 0;。

因为伪元素被附加到锚标签上，你告诉它占据整个表格单元格，它会强制锚标签至少达到这个尺寸，同时不影响锚标签本身的实际内容(从而保持其 垂直的中心对齐)。

比如说

table {
border-collapse: collapse;
table-layout: fixed;
}


td {
position: relative;
width: 200px;
padding: 0.5em 1em;
border: 2px solid red;
  

background-color: lime;
}


td a {
/* FONT STYLES HERE */
text-decoration: none;
}


td a::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
<table>
<tbody>
<tr>
<td>
<a href="http://www.google.com/">Cell 1<br>
second line</a>
</td>
<td>
<a href="http://www.google.com/">Cell 2</a>
</td>
<td>
<a href="http://www.google.com/">Cell 3</a>
</td>
<td>
<a href="http://www.google.com/">Cell 4</a>
</td>
</tr>
<tr>
<td>
<a href="http://www.google.com/">Cell 5</a>
</td>
<td>
<a href="http://www.google.com/">Cell 6<br>
second line</a>
</td>
</tr>
</tbody>
</table>

希望这个能帮上忙！

小开

我已经使用了这个解决方案: 在我的情况下比其他方法更有效。

CSS:

.blocktd {width: 100%; height: 100%; padding: 0px; overflow: hidden}


a.blocktd {margin: 0em;  padding: 50px 20px 50px 20px; display: block;}


a.blocktd:hover {border: 4px solid #70AEE8; border-radius: 10px; padding: 46px 16px 46px 16px; transition:  0.2s;}

HTML: <a href="..." class="blocktd">...</a>


提交答案