如何使链接（锚）标签包含th / td标签的100％高度？

Question

我有一个包含以下基本结构的表：

<table>
  <thead>
    <tr>
      <th>
        <a href="">Header Text</a>
      </th>
      ...
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Random text</td>
      ...
    </tr>
    ...
  </tbody>
</table>

可以点击a链接标记对表格进行重新排序。

我想定义一些CSS，这样无论a标记中的文本跨越多少行，所有a链接标记都将占据其包含{的高度的100％{ {1}}标记，以便您可以单击表标题中的任意位置以对特定列进行排序。

我尝试使用以下CSS，但它只适用于Chrome：

th

我也知道你可以使用JavaScript来解决这个问题，但我真的很想避免这种情况。换句话说，仅HTML / CSS解决方案是理想的。

我必须支持IE回IE8以及几乎所有版本的Chrome，FF等。有没有人对如何做到这一点有任何建议？

谢谢。

Answer 1

编辑：旧版本依赖于复制链接并隐藏副本，同时调整文档流程之外的其他内容，但我们可以做得更好......这里更好。

您可以通过::before在相对较新的Chrome（39.0+）和Firefox（31.2 +）以及最新版本的Safari for Windows（5.1.7）中使用它。

在IE中，它不会自行调整大小（与加倍相同的问题），但是通过抛出overflow:hidden，使height大于100％，并且通过巧妙的定位添加::after，您可以相当轻松地缓解此问题。

如果您将高度设置回100％，则可以强制显示IE必须可见。

显然，悬停时的背景阴影纯粹是出于演示目的。

另外，我想出了如何让老狐狸（FF 3.5.2，欢迎使用CSS3）干净利落地降解。这就是.safety的用途，它实际上比我预期的要容易。

    body{
        background: #f06;
        background: linear-gradient(45deg, #f06, yellow);
        min-height: 100%;
    }

    .safety{
        position:relative;
    }
    th{
        position:relative;
        background-color:rgba(255,255,255,0.5);
        overflow:hidden;
    }
    
    a{
        display:block;
    }
    a:hover{
        text-decoration:none;
        background-color:rgba(255,0,0,0.3);
    }
    a::before{
        content:"";
        position:absolute;
        top:0;
        left:0;
        height:900%;
        width:100%;
    }
    a::after{
        content:"";
        position:absolute;
        bottom:0;
        right:0;
        height:900%;
        width:100%;
    }
    a:hover::before{
        background-color:rgba(0,0,255,0.3);
    }
    a:hover::after{
        background-color:rgba(0,255,0,0.3);
    }

<span class="safety">
    <table>
        <tr>
            <th><a href="">The Link</a></th>
            <th><br /><br />next cell<br /><br /></th>
            <th><a href="">The Link 2<br />Naturally Taller</a></th>
            <th>next cell</th>
        </tr>
        <tr>
            <th>streeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeetch</th>
            <th>next cell</th>
            <th>next cell</th>
            <th>next cell</th>
        </tr>
    </table>
</span>

为什么要假元素？

因为我们没有从文档流中删除链接本身，所以链接仍然能够贪婪地抓住它自己需要的屏幕空间。

由于我们可以单独定位和调整大小，因此我们可以缓解浏览器在不删除链接的情况下选择100%;的含义的任何错误。

为什么你不能简单地说height:100%;

首先，a是一个inline元素，这意味着它只与其内容一样大。因此，在没有block或inline-block

的情况下，调整它本身就会失败

但是，这只会使width:100%;在这种情况下起作用。

如果您想要height:100%;，必须声明非内部相对庄园中的100％可以传播到基于百分比的元素。这意味着没有百分比（在屏幕单元vh, vw, vmin, vmax之外），否则当某些东西向上扩展时会产生“正确”行为，创建更多滚动条，然后在无限循环中向上扩展其大小。

但是，你可以通过position:absolute绕过它，因为这会从正常流中删除元素 - 因为它不允许增加其父级的大小，因此它不能产生无限循环。 / p>

由于父级具有可知的有限大小，如果它没有扩展到其相对高度的子级，height:100%;元素上的absolute将被使用（以预期的方式）所以只要absolute元素也是block或inline-block元素（因为inline的内容强制大小）。

它也需要width，即使block，因为它已从文档流中删除，因此不再确定应该有多宽（父级或锚定祖先？）< / p>

除了

执行方式的改变归功于Lea Verou的书，当我读到她使用::before的建议时，我觉得这完全是笨蛋 - 特别是因为我之前用它来扩展可点击区域。 / p>

此外，它的伪元素是什么元素？家长与CSS有染吗？

Answer 2

只要TH上没有单元格填充，这应该有效：

th {
  height: 2em;
}
th a {
  display: block;
  height: 2em;
}