如何將整個表格單元格轉換爲HTML/CSS中的鏈接？

Question

我讀了很多關於這個問題的問題，但沒有一個可以完美地解決問題：單元格不會在它的全高度點擊。

正如圖片所示，我爲使用<table>標籤和有色的可點擊的內容轉換成藍色我的網頁標題，而整個表着色成橙色。

的HTML代碼是：

<table class="visible" id="menu" align="center"> 
    <tr> 
    <td><a href="#"><p>Home</p></a></td> 
    ... 
    </tr> 
</table> 

而CSS COSE是：

#menu a { 
    display: block; 
    text-decoration: none; 
} 

不幸的是，你看，而不是整個細胞是藍色的，因此不整個小區是點擊。任何人都可以告訴我一個完美的解決方案（可能不使用JavaScript）？

Answer 1

嘗試display: flex和justify-content: center而不是display: block。

a { 
 
    background: lightblue; 
 
    display: flex; 
 
    justify-content: center; 
 
    text-decoration: none; 
 
}

<table align="center" border="1"> 
 
    <tr> 
 
    <td><a href="#"><p>Home</p></a></td> 
 
    </tr> 
 
</table>

Answer 2

不要使用<p/>（塊級）內<a/>（行內）。

a::after { 
    display:block; 
    content:" "; 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background:yellow; 
    z-index:-1; 
} 
td 
{ 
    position:relative; 
    z-index:0; 
} 

刪除「a」的樣式。

https://jsfiddle.net/1nrbL1mu/9/

這也適用於IE：

a::after 
{ 
    display:block; 
    content:" "; 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:300px; /* max possible */ 
    background:yellow; 
    z-index:-1; 
} 
td 
{ 
    position:relative; 
    z-index:0; 
    overflow:hidden; 
} 

https://jsfiddle.net/1nrbL1mu/12/