如何使链接填充不同高度的表格单元格？答案

【问题标题】：How do I make a link fill a table cell of varying height?如何使链接填充不同高度的表格单元格？
【发布时间】：2018-05-24 05:03:31
【问题描述】：

我有一张有两个单元格的表格。一个有链接，另一个有图像。

<table>
  <tr>
    <td>
      <a href="https://google.com">My Link</a>
    </td>
    <td>
      <img src="https://www.google.co.uk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    </td>
  </tr>
</table>

我怎样才能使整个第一个单元格作为链接而不只是文本本身。

可能有不同大小的图像，所以我不能依赖它是固定高度。

jsfiddle

【问题讨论】：

我们应该假设链接应该在单元格中垂直居中，还是应该与顶部或底部对齐？
@j08691 是的，垂直居中。
您是否尝试向单元格添加 onclick？我已经更新了你的小提琴jsfiddle.net/8g3o8fzp
stackoverflow.com/questions/3337914/…

标签： html css html-table

【解决方案1】：

由于图像高度一直在变化，因此将<a> 中的单词取出。使链接绝对定位在块内，这样它就占据了整个空间。这将使 td 的宽度仍然是单元格的内容，以便链接可以覆盖整个空间。

td{
  border:1px solid;
  position:relative;
}
td a{
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
}

<table>
  <tr>
    <td>
      <a href="https://google.com"></a>
      My Link
    </td>
    <td>
      <img src="https://www.google.co.uk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    </td>
  </tr>
</table>

【讨论】：

其实有很多方法可以做到... Flexbox，绝对位置，高度 100% ... :)
整个页面好像是一个链接
@Urbycoz 已修复，忘记将我在测试时添加的相对位置放在检查器中。 Ty 提醒
@Urbycoz 出于 SEO 的目的，这并不好......因为我们有一个没有内容的空链接，它也可能很糟糕，因为它可能被视为创建不良反向链接的隐藏链接，因为我们不能点击它（没有 CSS）
您对 SEO 目的是正确的。好吧，他也可以将文本放入链接中，然后将其隐藏。使文本透明。或者把它放在链接的标题中。他可以走不同的路线。

【解决方案2】：

你可以这样做：

a {
  display: block;
  height: 100%;
}
table{height: 100%;}
td{height: 100%;}

<table>
  <tr>
    <td>
      <a href="https://google.com">My Link</a>
    </td>
    <td>
      <img src="https://www.google.co.uk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    </td>
  </tr>
</table>

【讨论】：

有什么方法可以垂直对齐文本吗？
这种结构没有。使用 <div> 包装 <a> 和一些我认为是的 flexbox :)。

【解决方案3】：

您可以创建一个伪元素来覆盖 td 的区域：

a:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

td {
  position: relative; /*Make it relative to td*/
  border: 1px solid;
}

<table>
  <tr>
    <td>
      <a href="https://google.com">My Link</a>
    </td>
    <td>
      <img src="https://www.google.co.uk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    </td>
  </tr>
</table>

【讨论】：