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

Answer 1

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> 

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

Answer 3

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>