使表格单元格中的链接填充整行高度
我有一个数据表，每个单元格是一个链接。 我想让用户点击表格单元格中的任何地方，让他们跟随链接。 有时表格单元不止一行，但并非总是如此。 我使用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> 你需要在你的CSS的一个小的改变。 制作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%; }
编辑：
你已经在这里给另一个职位提供了解决scheme。 这是使用display: inline-block; 。 这与我的Chrome，FF3.6，IE8解决scheme结合使用
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; }
HTML
<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>
这个例子在这里
在块元素上设置一个任意大的负边界和相等的填充，并在父元素上隐藏溢出。
td { overflow: hidden; } td a { display: block; margin: -10em; padding: 10em; }
以下黑客作品[在Chrome / Firefox / Safari上testing]具有相同的td和锚点元素的填充。 而对于锚也有一个等于填充值的-ve的余量。
HTML
<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/
尝试display: block ：
td a {display: block; height:100%;}
[编辑]跆拳道…我可以证实这不适用于FF 4和Chrome。 这工作：
td a {display: block; height: 2.5em; border: 1px solid red;}
这表明height:100%; 没有在表格单元格中定义。 也许这是因为单元格从内容中获得它的大小（所以内容不能说“告诉我你的大小”，因为这会导致循环）。 如果你为单元格设置高度，它甚至不会工作，如下所示：
td {width: 200px; height: 3em; padding: 0px}
上面的代码再次失败。 所以我的build议是为链接使用定义的高度（可以省略宽度;对于块元素，这是默认的100％）。
[EDIT2]我在http://www.cssplay.co.uk/menus/点击了一百个例子，但没有一个混合单线和多线单元。; 看起来像你一个盲点。
我会在这里发表同样的答案，就像我自己的问题一样 。
受到Jannis M的回答的启发，我做了以下工作：
$(document).ready(function(){ $('table tr').each(function(){ var $row = $(this); var height = $row.height(); $row.find('a').css('height', height).append(' '); }); });
我添加了一个 因为空链接（不包含文本节点）不能被样式化（？）。
看到我更新的小提琴 。
你可以使用一个小的JavaScript。
<td onclick="window.location='http://www.google.com/'"> <a href="http://www.google.com/">Cell 3</a> </td>
或者，您可以创build一个完全填充单元格（div，span，或其他）的元素，并围绕您的大型不可见元素。
<td> <a href="http://www.google.com/"> <div style="width:100%; height:100%;">Cell 1<br> second line </div> </a> </td>
这里唯一的问题是，使用显示：块强制浏览器忽略垂直alignment：中心…
哎呀。
我陪审团把它看作是一个高度为60的单元格，而一个字体占用了20个像素的字体。然后我意识到我有一些2行文字的项目。 荡。
我结束了使用JavaScript。 JavaScript没有给出好的鼠标指向点击者的东西，但文本行，所以它会实际上触发一个视觉响应，而不是我想要它…然后，JavaScript将捕获所有的点击“错过'实际的href。
也许不是最优雅的解决scheme，但它现在运作足够好。
现在，如果我只能弄清楚如何以正确的方式做到这一点….
任何关于如何添加鼠标图标的想法改变为一个手为onclick覆盖的区域？ 现在，点击页面的工作原理，但只有当图标触及仅影响文本的href时，图标才会发生变化。
晚会不多，但我刚刚发现了一个很好的解决scheme。
您可以使用相对和绝对定位元素的组合，以及一个伪元素来获得您要去的效果。 没有额外的标记需要！
更改表格单元格（ <td> ），将其放在position: relative; ，并在<a>标签上创build一个::before或::after伪元素，并将其设置为position: absolute; ，也用top: 0; left: 0; right: 0; bottom: 0; top: 0; left: 0; right: 0; bottom: 0; 。
由于伪元素被附加到锚标签，并且告诉它占用整个表格单元格，所以会强制锚标签至less达到该尺寸，同时不会影响锚标签本身的实际内容（从而保持其中心alignment）。
例如
HTML：
<table> <tr> <td> <a>I'm centralised</a> </td> <td> <a>I'm 100% width</a> </td> <td> <a>AND I'm 100% height</a> </td> <td> <a>WITHOUT extra markup</a> </td> <td> <a>OR JavaScript!</a> </td> </tr> </table>
CSS：
table { border-collapse: collapse; table-layout: fixed; } td { position: relative; width: 150px; border: 2px solid red; } td a { padding: 0.5em 1em; } td a::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
希望这可以帮助！
你为什么不摆脱<a> altogheter并直接添加一个onClick到<td> ？
<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：我知道这个问题在很多年前就已经被提出并且得到了回答，但是上面的答案都没有解决我的问题。 希望这有助于某人。
对我来说，唯一的解决scheme是用<div>replace<table> <tr> ，并相应地使用display:table和display:table-row进行设置。
然后，您可以用<a>replace<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>
