Question

我有一张有两个牢房的桌子。一个有链接，另一个有图像。

<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

Answer 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>

Answer 2

你可以这样做：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

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

的区域

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

3 个答案: