使表格单元格中的链接填充整个行高度 [英] Make link in table cell fill the entire row height
问题描述
我有一个数据表，每个单元格是一个链接。我想允许用户点击表格单元格中的任何位置，并让他们跟随链接。有时表单元格多于一行，但不总是。我使用td a {display：block}获取链接覆盖大部分单元格。当行中有一个单元格是两行，而其他单元格只有一行时，一个行不会填充表行的整个垂直空间。以下是示例HTML，您可以在此处查看其 http://www.jsfiddle.net/RXHuE/ ： / p>
< head>
< style type =text / css>
td {width：200px}
td a {display：block;高度：100％; width：100％;}
td a：hover {background-color：yellow;}
< / style&
< title>< / title>
< / head>
< body>
< table>
< tbody>
< tr>
< td>
< a href =http://www.google.com/>单元格1< br>
第二行< / a>
< / td>
< td>
< a href =http://www.google.com/>单元格2< / a>
< / td>
< td>
< a href =http://www.google.com/>单元格3< / a>
< / td>
< td>
< a href =http://www.google.com/>单元格4< / a>
< / td>
< / tr>
< / tbody>
< / table>
< / body>
制作 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％;
}
但是使 height 50px 除了IE和FF之外，还适用于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;
}
HTML
< table>
< tbody>
< tr>
< td>
< a href =http://www.google.com/>单元格1< br>
第二行< / a>
< / td>
< td>
< a href =http://www.google.com/>单元格2< / a>
< / td>
< td>
< a href =http://www.google.com/>单元格3< / a>
< / td>
< td>
< a href =http://www.google.com/>单元格4< / a>
< / td>
< / tr>
< / tbody>
< / table>
示例展示了此处
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/:
<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>
You need a small change in your CSS. Making td height:100%; works for IE 8 and FF 3.6, but it doesn't work for Chrome.
td {
width: 200px;
border: solid 1px green;
height: 100%
}
td a {
display: block;
height:100%;
width:100%;
}
But making height to 50px works for Chrome in addition to IE and 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
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.
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>
The example lays here
这篇关于使表格单元格中的链接填充整个行高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
