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

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>