高さの指定がないセル全体をリンクにする

テーブルのセル全体をリンクさせると次のようになる

セル内の文字リンク

 ↓ セル全体にすると ↓ 

セル全体リンク

方法はaタグをブロックレベル要素に変更して、高さと幅を100%にするだけ。

<a href="#" style="display:block;width:100%;height:100%;">

このとき親要素の td に高さ指定が必須なのだが、セルの情報量に合わせてセルサイズをブラウザに自動で決めてもらいたいのでセルサイズを指定したくない。必要以上大きくセルの高さをしていすると格好がわるい。
しかし、セルサイズを指定しないと display:block を指定してもセル全体がリンクになってくれない。仮に親要素 td に height:100% と指定してもセル全体のリンクにはならない。px指定でないとダメなよう。

そこで、テーブルの高さを文字の大きさ以下(情報量以下の大きさ)にする。

高さ300px

 ↓ 高さを文字の高さ以下に設定する ↓ 

高さ1px

必要以上にテーブルの高さを広げずに、セル全体をリンクすることができる。

さて、自分の場合こうした上で文字をセルの垂直中央に揃えたかったのだが、うまくいかなかった。

セル1 セル2
セル2
セル2
セル2
セル2

セル1を垂直中央に置きたかったが、セルをブロックレベル化、 height を 100%にしたため vertical-align: middle も valign="middle" も思い通りに効いてくれない。

そこでdisplay:tableを使う。要素をtableのように横並びに配置させられるので思ったとおりのものができた。

セル1
セル2
セル2
セル2
セル2
セル2

コード
-----------------------------------------------------
<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;">セル1</a>
<a href="index.html" onclick="return false"style="display:table-cell;border: 1px solid #d4d4d4; width:200px;height:100%;vertical-align:middle;">セル2<br>セル2<br>セル2<br>セル2<br>セル2</a>
</div>
</div>
-----------------------------------------------------