Question

我试图在<th>元素中插入一个链接，并且让<a>元素填充整个<th>的空间。虽然我可以使用width:100%来水平填充，但要垂直填充似乎很麻烦。 height:100%似乎没有效果。

我想做到这一点，以便用户可以在单元格的任何位置单击来激活链接。我知道我可以在<th>本身上放置一个onClick属性，并通过javascript处理它，但我想以正确的CSS方式做到这一点。

澄清：表格的每一行高度可能不同，因为内容是动态的，因此使用固定高度的 <a> 或 <th> 元素的解决方法将不起作用。

这是一些示例代码：

<style type="text/css">
th {
  font-size: 50%;
  width: 20em;
  line-height: 100%;
}
th a {
  display:block;
  width:100%;
  height:100%;
  background-color: #aaa;
}
th a:hover {
  background-color: #333
}
</style>
<table border=1>
  <tr>
    <th><a href="foo">Link 1</a></th>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor.</td>
  </tr>
  <tr>
    <th><a href="foo">Link 2</a></th>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor. </td>
  </tr>
</table>

这是一个包含完全相同代码的页面。

正如您可以看到，如果您将鼠标悬停在链接上，<a> 元素不会垂直填充，从而产生尴尬的外观。我可以通过将其放在“th:hover a”样式中来修复悬停背景，但是只有在实际的 a 标记所在的位置单击链接才会实际运行。

Answer 1

只需将样式更改为这样

th {
  font-size: 50%;
  width: 20em;
  height: 100%;
  line-height: 100%; 
}

干杯 (gān bēi)。

Answer 2

正如@Hober所说，您需要为<th>元素指定一个高度。您还可以在那里使用height: 100%。

如果您知道您的<th>的尺寸，但看起来您在这种情况下可能不会（因为它们在侧面），我建议增加填充以将<a>推到边缘（超出<th>自身的任何填充），然后使用相应的负边距将其带回来。就像这样：

th a{
  padding: 10px 0;
  margin: -10px 0;
}

Answer 3

我最接近的是这个...

th {
  float: left;
  overflow: hidden;
  font-size: 50%;
  width: 20em;
  margin: auto;
}
th a {
  display: table; /* or block, up to you */
  margin: none;
  width:100%;
  height: 1px;
  background-color: #aaa;
  padding: 20%;
}

但它使得所有的行高都相同。如果这是一个问题，也许其他人可以解决它。

Answer 4

为了实现此目的，您可以将“a”元素的高度设置为像素而非百分比。

如果您指定一个百分比，那么100％将成为文本本身的高度。

一个像素高度将为您提供静态高度，并适用于此情况。

td a {height: 100px;}

Answer 5

您需要为<th>设置高度，这样您的样式块最终会是这样的。

th {
  font-size: 50%;
  width: 20em;
  height: 8ex;
  line-height: 100%;
}

编辑：实际上，对于高度，您应该使用垂直测量单位，如“ex”，而不是水平测量单位“em”。示例已更改以反映这一点。

Answer 6

你可以使用JavaScript来完成这个任务（见下文）。

<style type="text/css">
th {
font-size: 50%;
width: 20em;
background-color: #aaa;

}
.off {
background-color: #aaa;
}
.on {
background-color: #333
}


<th onmouseover="this.className= on " onmouseout="this.className= off ">><a href="foo">Link 1</a></th>

Answer 7

第th个元素需要分配一个高度。将其高度设置为100％应使元素扩展到其容器的高度（即行的高度）。在IE 6中可能无法正常工作，您可以尝试添加 _height：1％以解决IE6的问题-我没有IE6测试，但我在Firefox中进行了测试，它似乎正在做你想要的事情。

th {
  height: 100%;
}

友情链接