Question

我正在尝试在<th>元素中添加一个链接，并使<a>元素填充<th>的整个空格。虽然我可以让它以宽度：100％水平填充，但让它垂直填充会被证明是麻烦的。身高：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>

And here is a page with that exact same code

正如您所看到的，如果将鼠标悬停在链接上，则<a>元素不会垂直填充，这会产生难看的外观。我可以通过将其置于“ th：hover a ”样式来修复悬停背景，但是如果您单击实际a标记所在的位置，该链接仍然只能实际运行。

Answer 1

只需将样式更改为此

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

欢呼声

Answer 2

正如@Hober所说，你需要给<th>一个高度。您也可以在那里使用height: 100%。

如果你知道你的<th>的尺寸，看起来你可能不会在这种情况下（因为他们在旁边），我很幸运添加填充来推动{ {1}}向边缘（经过<a>本身的任何填充），然后将其带回相应的负边距。像这样：

<th>

Answer 3

你需要给<th>一个高度，这样你的样式块就会像

那样结束

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

编辑：实际上，对于高度，你应该使用像“ex”这样的垂直度量，而不是“em”的水平度量。示例已更改以反映该内容。

Answer 4

为此，您可以设置“a”元素的高度（以像素为单位）而不是百分比。

如果指定百分比，则100％将最终成为TEXT本身的高度。

像素高度将为您提供静态高度，并适用于这种情况。

td a {height: 100px;}

Answer 5

你可以用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 6

第th个元素需要分配一个高度。给它100％的高度应该使元件膨胀到其容器的高度（即行的高度）。这可能无法在IE 6中正常工作，您可以尝试添加_height: 1%来解决IE6问题 - 我没有使用IE6来测试它，但我在Firefox中进行了测试，看起来它正在做你想要的。

th {
  height: 100%;
}

Answer 7

我最接近的是......

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%;
}

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

CSS：使一个块元素填充父元素的整个空间？

7 个答案: