我有一个数据表,每个单元格都是一个链接.我想允许用户单击表格单元格中的任意位置并让它们按照链接进行操作.有时表格单元格不止一行,但并非总是如此.我使用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>
zob*_*ier 102
在块元素上设置任意大的负边距和相等的填充,并在父元素上隐藏溢出.
td {
overflow: hidden;
}
td a {
display: block;
margin: -10em;
padding: 10em;
}
http://jsfiddle.net/RXHuE/213/
Gau*_*ena 42
您需要对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%;
}
但要做出height对50px作品的Chrome除了IE和FF
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/">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>)更改为position: relative;，并在标签上创建一个::before 或 ::after伪元素<a>，并将其设置为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>希望这可以帮助！