方法はaタグをブロックレベル要素に変更して、高さと幅を100%にするだけ。
<a href=”#” style=”display:block;width:100%;height:100%;”>
このとき親要素の td に高さ指定が必須なのだが、セルの情報量に合わせてセルサイズをブラウザに自動で決めてもらいたいのでセルサイズを指定したくない。必要以上大きくセルの高さをしていすると格好がわるい。
しかし、セルサイズを指定しないと display:block を指定してもセル全体がリンクになってくれない。仮に親要素 td に height:100% と指定してもセル全体のリンクにはならない。px指定でないとダメなよう。
そこで、テーブルの高さを文字の大きさ以下（情報量以下の大きさ）にする。
必要以上にテーブルの高さを広げずに、セル全体をリンクすることができる。
さて、自分の場合こうした上で文字をセルの垂直中央に揃えたかったのだが、うまくいかなかった。
| セル１ | セル２ セル２ セル２ セル２ セル２ |
セル１を垂直中央に置きたかったが、セルをブロックレベル化、 height を 100%にしたため vertical-align: middle も valign=”middle” も思い通りに効いてくれない。
そこでdisplay:tableを使う。要素をtableのように横並びに配置させられるので思ったとおりのものができた。
コード
—————————————————–
<div style=”display:table;table-layout:fixed;”>
<div style=”display:table-row;“>
<a href=”index.html” onclick=”return false”style=”display:table-cell;border: 1px solid #d4d4d4; width:200px;height:100%;vertical-align:middle;”>セル１</a>
<a href=”index.html” onclick=”return false”style=”display:table-cell;border: 1px solid #d4d4d4; width:200px;height:100%;vertical-align:middle;”>セル２<br>セル２<br>セル２<br>セル２<br>セル２</a>
</div>
</div>
—————————————————–
