CSS - 親全体を満たすためのリンクを取得するエリア

私はかなり新しいですが、同様のSOの質問をたくさん読んでいます。私はまだ私が逃しているものはわからない：私は親の領域全体でリンクをクリック可能にしようとしている。下のコードは、高さ：100％を使用していても、領域全体の高さではなく全体の幅をリンクにしています。助けてください。ありがとうございました！CSS - 親全体を満たすためのリンクを取得するエリア

<!DOCTYPE html> 
<html> 
<head> 
<style> 
table { 
    border-collapse: collapse; 
} 

th { 
    background-color: #00169d; 
    color: white; 
    padding: 8px; 
} 

th a { 
    display: inline-block; 
    text-decoration: none; 
    text-align: center; 
    width: 100%; 
    height: 100%; 
    padding: 8px; 
} 

</style> 
</head> 
<body> 
    <table> 
     <tr> 
      <th><a href='tmp'>Date</a></th> 
      <th><a href='tmp'>ABCDEF</a></th> 
      <th><a href='tmp'>XYZ XYZ</a></th> 
     </tr> 
    </table> 
</body> 
</html>

出典

2017-02-05 Stanford Wong

あなたは大きなボタンが必要な場合は、より大きなパディングを追加（A）
アンカーに幅/高さを定義しないでください。

table { 
 
    border-collapse: collapse; 
 
} 
 

 
th { 
 
    background-color: #00169d; 
 
    color: white; 
 
    padding: 0; 
 
} 
 

 
th a { 
 
    display: block; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    padding: 16px; 
 
    color: white; 
 
} 
 

 
th a:hover { 
 
    background-color: grey; 
 
}

<table> 
 
    <tr> 
 
    <th><a href='tmp'>Date</a></th> 
 
    <th><a href='tmp'>ABCDEF</a></th> 
 
    <th><a href='tmp'>XYZ XYZ</a></th> 
 
    </tr> 
 
</table>

出典

2017-02-05 00:41:48 pol

私要素が私のヘッダ/ 要素よりも広くなっているとき、これはこの場合、リンクは唯一の全体領域の幅の一部をカバーしています...動作しません。たとえば、次のように

VERY LONG TEXT VERY LONG TEXT

Date	ABCDEF

–

は細かいhttps://jsfiddle.net/y610mLzt/ワークス、ブラウザで確認するdevツールのインスペクタを確認し、他のスタイルがどこから適用されているかを確認してください。 – pol

ありがとう！明らかに、私は次のものを使用していました： th { ディスプレイ：インラインブロック } ディスプレイの代わりに：ブロック...なぜ違いがありますか？ありがとうございました！ –

CSS - 親全体を満たすためのリンクを取得する​​エリア

答えて

関連する問題

CSS - 親全体を満たすためのリンクを取得するエリア