Html 使表格单元格中的链接填充整个行高
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3966027/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make link in table cell fill the entire row height
提问by Brian Fisher
I have a table of data and each cell is a link. I want to allow the user to click anywhere in the table cell and have them follow the link. Sometimes the table cells are more than one line but not always. I use td a {display: block} to get the link to cover most of the cell. When there is one cell in a row that is two lines and the others are only one line the one liners don't fill the entire vertical space of the table row. Here is the sample HTML and you can see it in action here http://www.jsfiddle.net/RXHuE/:
我有一个数据表，每个单元格都是一个链接。我想允许用户单击表格单元格中的任意位置并让他们点击链接。有时表格单元格不止一行，但并非总是如此。我使用 td a {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>
采纳答案by Gaurav Saxena
You need a small change in your CSS. Making tdheight:100%;works for IE 8 and FF 3.6, but it doesn't work for Chrome.
您需要对 CSS 进行一些小的更改。制作tdheight:100%;作品IE 8和FF 3.6，但它并不适用于Chrome浏览器。
td {
width: 200px;
border: solid 1px green;
height: 100%
}
td a {
display: block;
height:100%;
width:100%;
}
But making heightto 50pxworks for Chrome in addition to IE and FF
但要做出height对50px作品的Chrome除了IE和FF
td {
width: 200px;
border: solid 1px green;
height: 50px
}
td a {
display: block;
height:100%;
width:100%;
}
Edit:
编辑：
You have given the solution yourself in another post here; which is to use display: inline-block;.
This works when combined with my solution for Chrome, FF3.6, IE8
您已经在另一篇文章中自己给出了解决方案；这是使用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%;
}
Update
更新
The following code is working for me in IE8, FF3.6 and chrome.
以下代码在 IE8、FF3.6 和 chrome 中对我有用。
CSS
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
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>
The example lays here
例子放在这里
回答by zobier
Set an arbitrarily large negative margin and equal padding on the block element and overflow hidden on the parent.
在块元素上设置任意大的负边距和相等的填充，并在父元素上隐藏溢出。
td {
overflow: hidden;
}
td a {
display: block;
margin: -10em;
padding: 10em;
}
回答by vaichidrewar
Following hack works [Tested on Chrome / Firefox / Safari] Have the same padding for td and anchor elements. And for anchor also have margin which is equal to -ve of padding value.
以下 hack 作品 [在 Chrome / Firefox / Safari 上测试] 对 td 和锚元素具有相同的填充。并且对于锚点也有等于 -ve 填充值的边距。
HTML
HTML
<table>
<tr>
<td><a>Hello</a></td>
</tr>
</table>
CSS:
CSS：
td {
background-color: yellow;
padding: 10px;
}
a {
cursor:pointer;
display:block;
padding: 10px;
margin: -10px;
}
Working Fiddle :http://jsfiddle.net/JasYz/
工作小提琴：http: //jsfiddle.net/JasYz/
回答by Hyman_Hu
Little late to the party, but there's a nice solution I just discovered.
聚会有点晚了，但我刚刚发现了一个很好的解决方案。
You can use a combination of relative and absolute positioned elements, along with a pseudo element to get the effect your going for. No extra markup needed!
您可以使用相对和绝对定位元素的组合，以及一个伪元素来获得您想要的效果。不需要额外的标记！
Change the table cell (<td>), to be position: relative;, and create a ::beforeor ::afterpseudo element on the <a>tag, and set it to position: absolute;, and also use top: 0; left: 0; right: 0; bottom: 0;.
将表格单元格 ( <td>)更改为position: relative;，并在标签上创建一个::before或::after伪元素<a>，并将其设置为position: absolute;，并使用top: 0; left: 0; right: 0; bottom: 0;。
Because the pseudo element is attached to the anchor tag, and you're telling it to take up the entire table cell, it will force the anchor tag to be at least that size, whilst not affecting the actual content of the anchor tag itself (thereby retaining its central alignment).
因为伪元素附加到锚标签，并且你告诉它占据整个表格单元格，它会强制锚标签至少是那个大小，同时不影响锚标签本身的实际内容（从而保持其中心对齐）。
For example
例如
HTML:
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:
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;
}
Hope this helps!
希望这可以帮助！
回答by Aaron Digulla
Try display: block:
尝试display: block：
td a {display: block; height:100%;}
[EDIT] WTF ... I can confirm this doesn't work in FF 4 and Chrome. This works:
[编辑] WTF ...我可以确认这在 FF 4 和 Chrome 中不起作用。这有效：
td a {display: block; height: 2.5em; border: 1px solid red;}
That suggests that height:100%;isn't defined in a table cell. Maybe this is because the cell gets its size from the content (so the content can't say "tell me your size" because that would lead to a loop). It doesn't even work if you set a height for the cells like so:
这表明它height:100%;没有在表格单元格中定义。也许这是因为单元格从内容中获取其大小（因此内容不能说“告诉我你的大小”，因为这会导致循环）。如果您像这样为单元格设置高度，它甚至不起作用：
td {width: 200px; height: 3em; padding: 0px}
Again the code above will fail. So my suggestion is to use a defined height for the links (you can omit the width; that is 100% by default for block elements).
同样，上面的代码将失败。所以我的建议是为链接使用定义的高度（您可以省略宽度；对于块元素，默认情况下为 100%）。
[EDIT2] I've clicked through a hundred examples at http://www.cssplay.co.uk/menus/but none of them mix single line and multi-line cells. Seems like you hit a blind spot.
[EDIT2] 我在http://www.cssplay.co.uk/menus/ 上点击了一百个例子，但没有一个混合单行和多行单元格。看来你遇到了盲点。
回答by Tim Büthe
I will post the same answer here, as I did on my own question.
我会在这里发布相同的答案，就像我在我自己的问题上所做的一样。
Inspired by Jannis M's answer, I did the following:
$(document).ready(function(){
$('table tr').each(function(){
var $row = $(this);
var height = $row.height();
$row.find('a').css('height', height).append(' ');
});
});
I added a since empty links (not containing text nodes) can not be styled(?).
我添加了一个 因为空链接（不包含文本节点）无法设置样式（？）。
See my updated fiddle.
请参阅我更新的小提琴。
回答by JimmyDee
Only problem here is that using display: block forces the browser to ignore the vertical align: center...
这里唯一的问题是使用 display: block 会强制浏览器忽略垂直 align: center...
oops.
哎呀。
I jury rigged it to look right for one cell with height:60 and a font that occupied 20 pixels by adding a br... Then I realized that I had some items with 2-line text. Dang.
我通过添加一个 br 来操纵它以寻找一个高度为 60 的单元格和一个占据 20 像素的字体......然后我意识到我有一些带有 2 行文本的项目。党。
I ended up using the javascript. The javascript doesn't give the nice mousey pointy clicker thing, but the line of text does, so it will actually trigger a visual response, just not where I want it to... Then the Javascript will catch all the clicks that 'miss' the actual href.
我最终使用了 javascript。javascript 没有提供漂亮的鼠标尖点点击器的东西，但文本行会，所以它实际上会触发视觉响应，只是不是我想要的地方......然后 Javascript 将捕获所有“错过的点击” ' 实际的 href。
Maybe not the most elegant solution, but it works well enough for now.
也许不是最优雅的解决方案，但它现在工作得很好。
Now if I could only figure out how to do this the right way....
现在，如果我只能弄清楚如何以正确的方式做到这一点......
Any ideas on how to add the mouse icon change to a hand for the area covered by the onclick? Right now, the click to page works, but the icon only changes when it hits the href which only affects the text.
关于如何将鼠标图标更改添加到 onclick 覆盖区域的手的任何想法？现在，点击页面有效，但图标仅在点击仅影响文本的 href 时才会更改。
回答by Sam Dufel
You can use a little javascript.
您可以使用一些 javascript。
<td onclick="window.location='http://www.google.com/'">
<a href="http://www.google.com/">Cell 3</a>
</td>
Or, you can create an element which completely fills the cell (div, span, whatever) and wrap the around your big invisible element.
或者，您可以创建一个完全填充单元格（div、span 等）的元素，并将其包裹在您的大不可见元素周围。
<td>
<a href="http://www.google.com/">
<div style="width:100%; height:100%;">Cell 1<br>
second line
</div>
</a>
</td>
回答by Joe Black
Why don't you just get rid of the <a>altogheter and add an onClickto the <td>directly?
你为什么不只是摆脱了<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>
This way you cut out the middle man.
这样你就去掉了中间人。
PS: i know this was asked and answered many years ago, but none of the answers above solved the problem in my case. Hope this helps someone.
PS：我知道很多年前就有人问过并回答过这个问题，但上面的答案都没有解决我的问题。希望这可以帮助某人。
回答by Anonymous
For me the only solution is to replace <table><tr>with <div>s and style them using display:tableand display:table-rowaccordingly.
对我来说，唯一的解决方案是<table><tr>用<div>s替换display:table并display:table-row相应地使用它们的样式。
Then you can replace <td>with just <a>and style it with display:table-cell.
然后你可以<td>用 just替换<a>并用display:table-cell.
Work perfectly even on varying heights of <td>contents.
即使在不同高度的<td>内容上也能完美工作。
so original html without anchors:
所以没有锚的原始html：
<table>
<tr>
<td>content1<br>another_line</td>
<td>content2</td>
</tr>
</table>
now becomes:
现在变成：
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>