如何使鏈接填充不同高度的表格單元格？

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>