Как сделать так, чтобы ссылка заполняла ячейку таблицы различной высоты?

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

вы можете сделать это так:

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>

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