How do I make a link fill a table cell of varying height?

Question

I've got a table with two cells. One has a link in it and the other has an image.

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

How can I make the whole of the first cell work as a link rather than just the text itself.

There may be different sized images so I can't rely on it being a fixed height.

jsfiddle

Should we assume that the link should be centered vertically in the cell, or should it be aligned with the top or bottom instead? — j08691, May 23 '18 at 15:19
have you tried adding an onclick to the cell? I've updated your fiddle https://jsfiddle.net/8g3o8fzp/ — developer, May 23 '18 at 15:21
https://stackoverflow.com/questions/3337914/how-can-i-make-a-link-from-a-td-table-cell — soulshined, May 23 '18 at 15:21

Sensoray · Accepted Answer · 2018-05-23T15:30:59.600

4

Since the image height is always changing, take the words out of the <a>. Make the link be positioned absolutely within the block so it takes up the whole space. This will make the width of the td's still be to the cell's content so that the link can cover the entire space.

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>

edited May 23 '18 at 15:30

answered May 23 '18 at 15:22

Sensoray

2,360
2
18
27

There is a lot of way of doing it in fact ... Flexbox, position absolute, height 100% ... :) – Clément Jacquelin May 23 '18 at 15:27
The whole page seems to be a link – Urbycoz May 23 '18 at 15:30
@Urbycoz fixed, forgot to put the position relative that I added in my inspector when I tested. Ty for the heads up – Sensoray May 23 '18 at 15:31
@Urbycoz for SEO purpose this won't be good ... because we have an empty link with no content, it can also be bad as it may be seen as hidden link to create bad backlinks since we cannot click on it (without CSS) – Temani Afif May 23 '18 at 15:34
You're right about SEO purposes. Well, he could put the text inside the link as well and just hide it. Make the text transparent. Or put it in the title of the link. Different routes he could go. – Sensoray May 23 '18 at 16:17

score 2 · Answer 2 · answered May 23 '18 at 15:23

2

you can do it like this :

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>

answered May 23 '18 at 15:23

Clément Jacquelin

263
1
11

any way for you to vertically align the text though? – Sensoray May 23 '18 at 16:15
With this structure no. Be with a `
` wrapping the `` and some flexbox I think it is :).
– Clément Jacquelin May 24 '18 at 08:01

Temani Afif · Answer 3 · 2018-05-23T15:32:33.963

You can create a pseudo element to cover the area of the 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>

How do I make a link fill a table cell of varying height?

3 Answers3