テーブルセル全体をHTML/CSSのリンクにするには？

Question

私はこの問題についての質問をたくさん読んで、しかしそれらのどれも完全に問題を解決することができませんでした：それは完全な高さだでセルがクリック可能ではありません。

絵に示されているように、私は<table>タグを使って自分のWebページのために見出しを作って、テーブル全体がオレンジ色に着色されている間、青にクリック可能なコンテンツを色付け。

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: blockのdisplay: flexとjustify-content: centerを試してみてください。

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

<a/>内側（ブロックレベル）（インラインレベル）<p/>を使用しないでください。

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/