この記事について
| 環境 | html、css |
|---|---|
| 目的 | セルの高さを指定せずに、セル全体をリンクにする |
| 結果 | aタグをdisplay:blockにしてtdの高さを1pxなど文字以下に指定。垂直中央揃えが必要ならdisplay:tableで組む |
つまずきポイント要約
- aタグのdisplay:blockはtdにpx指定の高さがないと効かない(height:100%はダメ)
- セルの高さを文字以下(1px)にすると、内容量に合わせた自動サイズのままリンク全体化できる
- ブロック化+height:100%にするとvertical-alignが効かなくなる→display:tableで解決
方法は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>